<?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>PEOPEOPEOPEO | Archive | December</title>
	<atom:link href="http://www.peopeo.de/2011/12/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.peopeo.de</link>
	<description></description>
	<lastBuildDate>Mon, 14 May 2012 07:53:15 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<item>
		<title>The New Business Model of LBS</title>
		<link>http://www.peopeo.de/the-new-business-model-of-lbs/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=the-new-business-model-of-lbs</link>
		<comments>http://www.peopeo.de/the-new-business-model-of-lbs/#comments</comments>
		<pubDate>Thu, 29 Dec 2011 09:45:56 +0000</pubDate>
		<dc:creator>xiaona</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Business Model]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Training Activities]]></category>
		<category><![CDATA[User Experience]]></category>

		<guid isPermaLink="false">http://www.peopeo.de/?p=1712</guid>
		<description><![CDATA[Famous Location-Based Service (LBS) Foursquare opens a new business this week: Allow anyone sets up brands and business-oriented pages, and interact from gradually without  physical locations.]]></description>
			<content:encoded><![CDATA[<p><span id="more-1712"></span></p>
<p>“before this service, around 70 brands have been created every week. but now, anyone can set up this kind of pages and others can Follow these pages.” Said Noah Weiss,a Product Manager of Foursquare，up to now, there are 2500 brands here.</p>
<p>The business model of LBS has been a headache for entrpreneurs for a long time，now how does Foursquare&#8217;s this move provide provide us new ideas？</p>
<p>First let&#8217;s start with the brand page categorization, after careful observation, we can find that there are two types of brand pages in Foursquare:</p>
<p>One type is tradtional business such as Starbucks, McDonald, RedBull. They encourage users to sign in by vouchers or badges.<br />
Another type is media or products, such as MTV, NewYork Times, WallStreet Daily,Windows Live. They focus on exhibiting brand images and product news.</p>
<p>OK，for the first type of customers(many are chain stores)，business models are clear：the function of Foursquare is a voucher printer. For the second type of customers，Foursquare is trying to be CRM (Customer Relationship Management) based Ad platform.</p>
<p>How will this bring any inspirations?</p>
<p>For example, a HollyWood movie is going to release and want to use Foursquare for ads. What things can be done?</p>
<p>Set up a movie specific page to abstract eyeballs.<br />
Describe the backgrounds for specific locations in the movie and encourage fans to sign in.<br />
Tell the background story and use Foursquare&#8217;s Relationship network to distribute.<br />
Add Foursquare button on the official movie website and add to To-Do list after user clicks.</p>
<p>This way shapes the high level &#8220;interactive ad&#8221;, it&#8217;s more funny than Twitter and Facebook style embedded ads and can turn ads to sales more directly (or downloads), which is the results what ad owners want. Because of the brand specific pages, Foursquare surpasses general LBS service by extending it for other domains and usages.</p>
<p>&#8220;at right time and right locations for fine-grained targeted promotation&#8221;, Will Foursquare&#8217;s attempt be successful?</p>
<p>（From：http://www.alibuybuy.com/posts/63382.html, Translated by PeoPeo）</p>
]]></content:encoded>
			<wfw:commentRss>http://www.peopeo.de/the-new-business-model-of-lbs/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Five Principals of UE Design</title>
		<link>http://www.peopeo.de/five-principals-of-ue-design/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=five-principals-of-ue-design</link>
		<comments>http://www.peopeo.de/five-principals-of-ue-design/#comments</comments>
		<pubDate>Thu, 29 Dec 2011 09:36:19 +0000</pubDate>
		<dc:creator>xiaona</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Training Activities]]></category>
		<category><![CDATA[User Experience]]></category>

		<guid isPermaLink="false">http://www.peopeo.de/?p=1709</guid>
		<description><![CDATA[(中文) 如何设计出具有优秀用户体验的产品是交互设计师始终面临的一道难题，“好的产品设计一定是建立在对用户需求的深刻理解上”这句话被许多设计师视为设计的天条；至于在设计中如何发现并深刻理解用户的需求，]]></description>
			<content:encoded><![CDATA[<p>Sorry, this entry is only available in <a href="http://www.peopeo.de/zh/2011/12/feed/">中文</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.peopeo.de/five-principals-of-ue-design/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>UFD-Usability for Disability</title>
		<link>http://www.peopeo.de/ufd-usability-for-disability/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=ufd-usability-for-disability</link>
		<comments>http://www.peopeo.de/ufd-usability-for-disability/#comments</comments>
		<pubDate>Thu, 29 Dec 2011 09:26:53 +0000</pubDate>
		<dc:creator>xiaona</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Training Activities]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Vision Design]]></category>

		<guid isPermaLink="false">http://www.peopeo.de/?p=1707</guid>
		<description><![CDATA[2010年12月11日下午，飘飘人数字科技（北京）有限公司CEO唐庭斌先生受邀参加2010年首届中国交互设计体验日，唐先生在交互设计教育工作坊进行了《有福的——针对障碍性的易用性》]]></description>
			<content:encoded><![CDATA[<p>2010年12月11日下午，飘飘人数字科技（北京）有限公司CEO唐庭斌先生受邀参加2010年首届中国交互设计体验日，唐先生在交互设计教育工作坊进行了《有福的——针对障碍性的易用性<span id="more-1707"></span>》<img title="More..." src="http://www.peopeo.de/wp-includes/js/tinymce/plugins/wordpress/img/trans.gif" alt="" />(《Usability for Disability》)的专题讲座。</p>
<p><wbr> 唐先生讲到，易用性的最终目的就是要实现健全人和残障人士都能对任何产品方便的使用、学习。但是，所有人都会有面临因为本身的残疾或是生命阶段的特殊性而产生“残疾”的情况。导致我们“残疾” 的因素来自于我们的感觉、听觉、知识储备，这其中又包含格式塔效应、稳定性、相似性、异常、封闭性、延续性等因素对我们的影响。</wbr></p>
<p>结合自身的设计实践，唐先生认为，设计就要从人们的阅读习惯、使用习惯上多加斟酌，并充分利用各种效应的所能产生的作用，实现针对障碍的易用性。</p>
<p>唐先生指出，目前很多设计与这种易用性相背离。例如，有的网站会给用户过多的选择，导致用户的迷惑。</p>
<p>飘飘人数字科技有限公司一直关注公益事业的发展，并努力贡献自己的力量。上目前，飘飘人正在义务为NGN组织—1+1声音工作室的声波网进行改版设计，该设计要满足盲人和低视力人群的上网需求。设计伊始，飘飘人就安排了相关人员进行了文献调查、实地调查、个体访谈、小组访谈、同类产品对比等多种方式的调研，目前该设计已经进入收尾阶段，很快就可以上线使用，该网站在字体、颜色、亮度、盲人使用习惯等方面都做了细致的考究，一定会盲人和低视力人群带来完美的上网体验，真实实现无障碍、易用性。</p>
<p>http://www.peopeo.de</p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.peopeo.de/ufd-usability-for-disability/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Training for China Telecom</title>
		<link>http://www.peopeo.de/training-for-china-telecom/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=training-for-china-telecom</link>
		<comments>http://www.peopeo.de/training-for-china-telecom/#comments</comments>
		<pubDate>Thu, 29 Dec 2011 09:19:27 +0000</pubDate>
		<dc:creator>xiaona</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Peopeo News]]></category>
		<category><![CDATA[Training Activities]]></category>
		<category><![CDATA[Vision Design]]></category>

		<guid isPermaLink="false">http://www.peopeo.de/?p=1704</guid>
		<description><![CDATA[On August 2nd，Ben Tang the CEO of Peopeo took the training team to China Telecom and did a whole day training . China Telecom is Peopeo's old friend.]]></description>
			<content:encoded><![CDATA[<p>On August 2nd，Ben Tang the CEO of Peopeo took the training team to China Telecom and did a whole day training . China Telecom is Peopeo&#8217;s old friend.<span id="more-1704"></span>We have cooperated for many times .This time we were invitated to do the UE and Research training for them .</p>
<p>Ben Tang did a presation named &#8220;the Factors of the User Exeperice&#8221; .Shuo Fu ,the usablity consulting of Peopeo did a speech about the research.During the trainding ,we aslo prepared some interesing interactive games which not only help the students relax but aslo impressed them about the training topic.</p>
<p>The training was a success.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.peopeo.de/training-for-china-telecom/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Iphone App Design Trends</title>
		<link>http://www.peopeo.de/iphone-app-design-trends/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=iphone-app-design-trends</link>
		<comments>http://www.peopeo.de/iphone-app-design-trends/#comments</comments>
		<pubDate>Thu, 29 Dec 2011 09:12:06 +0000</pubDate>
		<dc:creator>xiaona</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[Vision Design]]></category>

		<guid isPermaLink="false">http://www.peopeo.de/?p=1702</guid>
		<description><![CDATA[For the past two years, the elegant <strong>iPhone</strong> has housed some of the most poorly designed applications you could imagine. The hype surrounding]]></description>
			<content:encoded><![CDATA[<p>For the past two years, the elegant <strong>iPhone</strong> has housed some of the most poorly designed applications you could imagine. The hype surrounding<img title="More..." src="http://www.peopeo.de/wp-includes/js/tinymce/plugins/wordpress/img/trans.gif" alt="" />iPhone<span id="more-1702"></span> has prompted many designers across the globe to try their skills with the new mobile medium. The result are literally thousands of various iPhone-applications that are often hardly usable and counter-intuitive. However, some designers invest a lot of time and efforts into creating usable and original user interfaces (yes, there are usable <em>and</em> creative UIs).</p>
<p>This article explores the ways in which designers use graphical elements and screen interactions to <strong>create iPhone-applications that are easy on the eyes and mind</strong>. The aim of this article is to display common trends and design approaches in iPhone app design – please notice that they are not necessarily optimal ones from the design or usability point of view.</p>
<h3>1. Mirroring Native iPhone UI Elements</h3>
<p>“Tell them what you’re gonna tell them, tell them, and then tell them what you told them.” Creating a whole new OS within your app can be fun, but when you’re dealing with the mobile medium, people just want to get stuff done. Getting stuff done means that the designer has to get into the flow of the OS and create an app that requires zero explanation for the end user to operate. Mirroring the layout and UI elements that the user is already familiar with saves time and energy. So it seems quite convenient to use this approach when designing iPhone-applications.</p>
<p><a href="http://www.facebook.com/apps/application.php?id=6628568379">Facebook</a> (<a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=284882215&amp;mt=8">iTunes Link</a>)<br />
In the new Facebook 3.0, you’ll find a grid layout that users can swipe left and right to access more categories. Because it mirrors Apple’s native UI, users do not have to “learn” how to use it all over again. A similar approach exists in Web design: users expect to see a logo in the top left, navigation along the top, etc. Facebook has taken this concept mobile, using large buttons that are easily distinguishable and tap-able.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/images/iphone-app-design-trends/facebook.png" alt="Facebook in iPhone App Design Trends" width="320" height="460" /></p>
<p><a href="http://www.where.com/carriers/iphone.php">Where</a> (<a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=281790044&amp;mt=8">iTunes link</a>)<br />
Where has a similar concept, allowing users to swipe left and right to access more data.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/images/iphone-app-design-trends/where.png" alt="Where in iPhone App Design Trends" width="320" height="460" /></p>
<p><a href="http://tweetdeck.com/beta/">Tweetdeck</a> [<a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=318518757&amp;mt=8" target="_blank">iTunes link</a>]<br />
Tweetdeck is a good example of user interface design on many levels. Notice how the design highlights recent updates. The application could display the updates in a new window, with a categorized or tabbed list. But it doesn’t. Instead, a more familiar dialogue menu is displayed — it serves as a springboard to jump to a specific category or to clear the messages altogether.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2009/09/tweetdeck2.png" alt="Tweetdeck2 in iPhone App Design Trends" width="320" height="460" /></p>
<h3>2. Simplifying The Interface</h3>
<p>Simplifying user interfaces may sound like a mechanical task, but what lies beneath the surface of user interface design? The answer is simple: users. And what do users want? What makes them all warm and fuzzy? How do you deliver what they want so that they don’t even notice how they are consuming information?</p>
<p>Facebook’s first release did a great job of fitting a lot of core functionality into a small space. The problem, of course, is in laying out all that data <em>and</em> creating an intuitive interface. Compare 3.0 with the first release, and you’ll see how they took a “springboard” approach to streamlining the interface, keeping it intuitive and maintaining functionality.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/images/iphone-app-design-trends/facebook_animation.gif" alt="Facebook Animation in iPhone App Design Trends" width="320" height="460" /></p>
<p><a href="http://www.flickr.com/">Flickr</a> [<a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=328407587&amp;mt=8" target="_blank">iTunes link</a>]<br />
Flickr is another example of how to achieve a good balance between functionality, visual design and the small display area on mobile devices. Think about it: what is at the core of Flickr? Photos. Its users probably do not want to look at big clunky navigational elements; instead, they are looking for pictures. Flickr has managed to fit all of its core functionality without heading down the highway to navigational hell. In fact, most elements in the navigation are handled by interacting with the photos themselves. Simple and smart.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2009/10/flickr.png" alt="Flickr in iPhone App Design Trends" width="320" height="460" /></p>
<h3>3. Hardware-ish Look</h3>
<p>Many utilities are breaking out of the conventional iPhone UI to take advantage of the device’s unique ability to respond to finger gestures. Many of these have hardware-ish interfaces that users are familiar with but come with perpetually shiny exteriors and clicks and pops that maintain their newness from the first to one-thousandth click. Next up, though: an app that gets dirtier the more you play with it.</p>
<p><a href="http://tapbots.com/convertbot/">Convertbot</a> (<a href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D308928075%2526mt%253D8%2526uo%253D6%2526partnerId%253D30">iTunes link</a>)<br />
Convertbot reminds us of the proportion wheel we all used in grade school, except it’s more distinctive, original and creative.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/images/iphone-app-design-trends/convertbot.png" alt="Convertbot in iPhone App Design Trends" width="320" height="460" /></p>
<p><a href="http://www.realmacsoftware.com/littlesnapper/iphone/">Little Snapper</a> (<a href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D310591640%2526mt%253D8%2526uo%253D6%2526partnerId%253D30">iTunes Link</a>)<br />
Little Snapper mimics the wheel that you turn on a typical digital SLR</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/images/iphone-app-design-trends/littleSnapper.png" alt="LittleSnapper in iPhone App Design Trends" width="320" height="460" /></p>
<p><a href="http://www.ihandysoft.com/carpenter/">iHandy Level</a> (<a href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D293621500%2526mt%253D8%2526uo%253D6%2526partnerId%253D30">iTunes Link</a>)<br />
iHandy Level simulates the look and functionality of a real, well-used leveler.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/images/iphone-app-design-trends/iHandy_level.png" alt="IHandy Level in iPhone App Design Trends" width="478" height="318" /></p>
<p><a href="http://www.futuretap.com/home/whereto-en/">Where To?</a> [<a href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D314785156%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" target="_blank">iTunes Link</a>]<br />
This application looks like it belongs in a Mercedes. Plush leather, matte-finish tactile buttons: quality craftsmanship. We can just imagine how each button press feels solid, requiring the perfect amount of pressure.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2009/10/where_to.png" alt="Where To in iPhone App Design Trends" width="320" height="460" /></p>
<h3>4. Rich, Padded And Pretty List Views</h3>
<p>You know that you are a geek designer when you get excited about the latest trends in list view design. And what do people do when they encounter a list view? Of course, they skim. And how do we make it easier for people to decide what interests them? That’s right: more visual cues!</p>
<p>Essentially, users are asking for a snapshot of what’s next, and then decide if they want more information. One way to do this is with <strong>big pretty buttons</strong>. Large and in charge, elegantly designed big buttons give the user a lot of information through their color, icons and typography.</p>
<p><a href="http://junecloud.com/software/iphone/delivery-status-touch.html">Delivery Status Touch</a> (<a href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D290986013%2526mt%253D8%2526uo%253D6%2526partnerId%253D30">iTunes Link</a>)<br />
Check out how Delivery Status uses appropriate colors on its big buttons to identify each brand. And it uses typography well to establish a hierarchy of information.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/images/iphone-app-design-trends/delivery_status.png" alt="Delivery Status in iPhone App Design Trends" width="320" height="460" /></p>
<p><a href="http://www.mentalworkout.com/products/iphone-applications/be-happy-now/">Be Happy Now</a> (<a href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D321896701%2526mt%253D8%2526uo%253D6%2526partnerId%253D30">iTunes Link</a>)<br />
Be Happy Now’s big buttons convey the “be happy” mantra through a mellow color scheme and light, calm and clear typeface.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/images/iphone-app-design-trends/beHappyNow.png" alt="BeHappyNow in iPhone App Design Trends" width="320" height="460" /></p>
<p><a href="http://www.squarewheelsoft.com/nextread/nextread.html">Next Read</a> [<a href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D299379727%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" target="_blank">iTunes link</a>]<br />
The Next Read application allows friends to share books. Here all books about a particular topic are presented, including the title, cover image, review rating and number of people who have recommended it. Notice the padding and a lot of white space for each navigation option; this makes the areas easily clickable and easier to navigate.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2009/10/nextRead.png" alt="NextRead in iPhone App Design Trends" width="320" height="460" /></p>
<p><a href="http://www.nike.com/nikeos/p/nikewomen/language_tunnel/?">Nike</a> [<a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=301521403&amp;mt=8" target="_blank">iTunes link</a>]<br />
Nike’s workout application for women includes a nice visual treatment and illustrations that match the brand. It breaks out of the traditional UI just enough to communicate the brand without making it difficult for users to understand the interface and how to use it.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2009/10/nike.png" alt="Nike in iPhone App Design Trends" width="639" height="480" /></p>
<p><a href="http://www.borange.com/">Borange</a> [<a href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D297643026%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" target="_blank">iTunes link</a>]<br />
Borange is a “social availability” application that helps you coordinate meetings with friends. The list view presents a lot of information: friends you want to hang out with, the meeting location and a nice visualization of friends who are available.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2009/10/borange.png" alt="Borange in iPhone App Design Trends" width="320" height="460" /></p>
<h3>5. Layered Interface</h3>
<p>Several applications take advantage of the iPhone’s capabilities by layering the interface and making some elements stationary and others vertically or horizontally scrollable. This approach has several benefits:</p>
<ol>
<li>It reduces the number of traditional navigation elements that are necessary (i.e. fewer buttons help to avoid a cluttered interface).</li>
<li>It gives users a faster route to the information they want.</li>
<li>More screen space is available for information.</li>
</ol>
<p><a href="http://www.atebits.com/tweetie-iphone/">Tweetie</a> (<a href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D296415944%2526mt%253D8%2526uo%253D6%2526partnerId%253D30">iTunes Link</a>)<br />
Tweetie uses layers to organize information specific to each of your Twitter friends. Just look at all of the information packed into this one screen!</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/images/iphone-app-design-trends/tweetie.png" alt="Tweetie in iPhone App Design Trends" width="320" height="460" /></p>
<p><a href="http://www.barnesandnoble.com/iphone/">Barnes &amp; Noble</a> [<a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=320214162&amp;mt=8" target="_blank">iTunes link</a>]<br />
Barnes &amp; Noble has a layered interface that allows you to quickly slide through new releases at the top or dive into more categories below.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2009/10/barnesandnoble.png" alt="Barnesandnoble in iPhone App Design Trends" width="320" height="460" /></p>
<p><a href="http://www.usatoday.com/iphone/">USA Today</a> [<a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewArtist?id=300669006" target="_blank">iTunes link</a>]<br />
USA Today takes a slightly different approach to layering the interface in its “Pictures” section: it uses sliding panels to display blocks of information. While the interface may look cluttered at the first glance, one can easily get around it. The interesting part is that within each panel you can slide thumbnails left and right to view more images.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2009/10/usaToday1.png" alt="UsaToday1 in iPhone App Design Trends" width="320" height="460" /></p>
<p><a href="http://www.pantone.com/pages/pantone/index.aspx">myPantone</a> [<a href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D329515634%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" target="_blank">iTunes link</a>]<br />
Would we expect any less from Pantone? The color picker shown above is a layered interface that lets you pick from a range of colors, sort and scroll as well as open and close detail screens, all without too driving you crazy.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2009/10/pantone.png" alt="Pantone in iPhone App Design Trends" width="320" height="460" /></p>
<h3>6. Icons For The List View</h3>
<p>Icons aren’t just for springboard-loving folks. On small screens, icons can give a huge boost to an application’s usability and navigation. Let’s now take a look at some examples of applications that use icons to their advantage.</p>
<p><a href="http://www.istudiez.com/">iStudiez</a> (<a href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D310636441%2526mt%253D8%2526uo%253D6%2526partnerId%253D30">iTunes Link</a>)<br />
This application uses various educational metaphors as icons to clearly communicate the purpose of the application. Excellent visual cues tell the student what’s happening today at a glance.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/images/iphone-app-design-trends/istudiesz.png" alt="Istudiesz in iPhone App Design Trends" width="320" height="460" /></p>
<p><a href="http://www.taptapmobile.com/en/topfloor">Top Floor</a> (<a href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D293259732%2526mt%253D8%2526uo%253D6%2526partnerId%253D30">iTunes Link</a>)<br />
Top Floor uses simple and easily recognizable icons to quickly guide users to their category of choice.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/images/iphone-app-design-trends/topFloor.png" alt="TopFloor in iPhone App Design Trends" width="320" height="460" /></p>
<p><a href="http://www.nytimes.com/services/mobile/iphone.html">New York Times</a><br />
Isn’t it great when applications just let you do whatever you want to do? For an app with as much information as the New York Times’, users are bound to have their favorite sections. Well, guess what? The New York Times cares: it lets you customize the tab bar’s navigation to include only your favorite sections of the paper. Drag an icon down the tab bar and you are set. The downside of the design is, of course, its lack of visual appeal.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2009/10/wallStJournal.png" alt="WallStJournal in iPhone App Design Trends" width="320" height="460" /></p>
<p><a href="http://www.filemaker.com/products/bento/iphone.html">Filemaker</a> [<a href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D314638461%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" target="_blank">iTunes link</a>]<br />
Here is another example of beautiful icons that aren’t obscure or confusing. Designers should never use icons just for the sake of having icons. As designers, we want icons that illustrate what users are actually going to get when they choose a particular path. Nicely done, Filemaker.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2009/10/filemaker.png" alt="Filemaker in iPhone App Design Trends" width="320" height="460" /></p>
<h3>7. Illustrations in use</h3>
<p>Applications that rely on graphics not found in the standard user interfaces are increasing in popularity, as developers try to set their apps apart from the crowd. Sometimes it works, but often it doesn’t. The more unconventional a design is, the more likely it is to have usability problems. Please always conduct usability testing before releasing a product with a “creative” user interface.</p>
<p><a href="http://www.peopleoperatingtechnology.com/our-apps/magnetic-personalities/">Magnetic Personalities</a> (<a href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D321601898%2526mt%253D8%2526uo%253D6%2526partnerId%253D30">iTunes link</a>)<br />
An excellent example of how buttons don’t have to look like standard buttons.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/images/iphone-app-design-trends/magneticPersonalities.png" alt="MagneticPersonalities in iPhone App Design Trends" width="320" height="460" /></p>
<p><a href="http://www.sugarsync.com/">SugarSync</a> [<a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=288491637&amp;mt=8" target="_blank">iTunes link</a>]<br />
This interface could have easily followed the traditional list-view route. Instead, the designers played with the concept of “connectivity” to create a visual treatment that communicates the purpose of the app. It is unusual and requires some time to get used to.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2009/10/sugarsync.png" alt="Sugarsync in iPhone App Design Trends" width="320" height="460" /></p>
<p><a href="http://www.mommaps.com/">Mom Maps</a> [<a href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D309570382%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" target="_blank">iTunes link</a>]<br />
Another example of how illustrations do a great job of pulling together the whole concept of an application.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2009/10/momMaps.png" alt="MomMaps in iPhone App Design Trends" width="320" height="460" /></p>
<h3>8. Using Gestures</h3>
<p>Classic linear navigation may look boring: a button that links to other buttons, which leads you to a list of something, which leads you to such-and-such an interaction. Not really spectacular. The possibilities for creative interaction in utility apps are huge and largely untapped (no pun intended).</p>
<p><a href="http://infinite-labs.net/mover/?_coming_from=mover-plus-its">Mover</a> (<a href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D320907954%2526mt%253D8%2526uo%253D6%2526partnerId%253D30">iTunes link</a>)<br />
Mover exemplifies how to use gestures for sharing contacts, photos and bookmarks. Open two devices, and flick the shared files from one handset to the other.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/images/iphone-app-design-trends/mover.png" alt="Mover in iPhone App Design Trends" width="320" height="460" /></p>
<p><a href="http://www.criticalmatter.com/abc_animals/">ABC Animals</a> [<a href="http://click.linksynergy.com/fs-bin/stat?id=u73nf2nX9kU&amp;offerid=146261&amp;type=3&amp;subid=0&amp;tmpid=1826&amp;RD_PARM1=http%253A%252F%252Fitunes.apple.com%252FWebObjects%252FMZStore.woa%252Fwa%252FviewSoftware%253Fid%253D292402752%2526mt%253D8%2526uo%253D6%2526partnerId%253D30" target="_blank">iTunes link</a>]<br />
This application teaches while it entertains. Being able to trace a letter with your finger is another example of how the iPhone responds to touch and movement.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2009/10/abcanimals.png" alt="Abcanimals in iPhone App Design Trends" width="318" height="478" /></p>
<p><a href="http://allrecipes.com/features/more/iphone.aspx">All Recipes</a> [<a href="http://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=299515267&amp;mt=8" target="_blank">iTunes link</a>]<br />
This applications allows you to mix in various elements to create your next meal using gestures.</p>
<p><img src="http://media.smashingmagazine.com/wp-content/uploads/2009/10/allRecipies.png" alt="AllRecipies in iPhone App Design Trends" width="320" height="460" /></p>
<p>(<a title="http://www.smashingmagazine.com/2009/10/09/iphone-app-design-trends/" href="http://www.smashingmagazine.com/2009/10/09/iphone-app-design-trends/">http://www.smashingmagazine.com/2009/10/09/iphone-app-design-trends/</a>)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.peopeo.de/iphone-app-design-trends/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Quality in web design: Business needs vs. user expectations</title>
		<link>http://www.peopeo.de/quality-in-web-design-business-needs-vs-user-expectations/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=quality-in-web-design-business-needs-vs-user-expectations</link>
		<comments>http://www.peopeo.de/quality-in-web-design-business-needs-vs-user-expectations/#comments</comments>
		<pubDate>Thu, 29 Dec 2011 09:04:31 +0000</pubDate>
		<dc:creator>xiaona</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Vision Design]]></category>

		<guid isPermaLink="false">http://www.peopeo.de/?p=1699</guid>
		<description><![CDATA[Evaluating the quality of web design is predominantly a subjective process as it needs to be evaluated in relation]]></description>
			<content:encoded><![CDATA[<h2>Evaluating the quality of web design is predominantly a subjective process as it needs to be evaluated in relation <span id="more-1699"></span>to some sort of demand or need of a user. It does not make sense to talk about good or bad web design only evaluating how pretty it looks. Most people do not use websites in order to be visually stimulated, but instead to find information, to make reservations, or keep in touch with contacts. They thus evaluate the successfulness of a website’s web design on its ability to deliver information sought, help make reservations, or facilitate keeping in touch with contacts.</h2>
<p>Talking about good or bad web design in this way only makes sense if it is in the context of what the user expects. The most important part of the quality concept in web design is thus the user’s evaluation of the web design’s success and not the designer’s. <strong>Quality in web design is the degree of fulfillment of the user’s expectations.</strong></p>
<p>When developing the website that makes your business run, we need to evaluate web design from a business perspective. However, relying solely on a business perspective of quality is dangerous.</p>
<p>Many websites are build on a concept of quality that relies on what the market demands and what currently works, but to prevent the foundation of our businesses from being pulverized by new competing products, we should rid ourselves from preconceived and esoteric opinions about what quality is. Instead we should evaluate the quality of our work with basis in the users’ mind and with an ignorance of what the market demands.</p>
<p>The key is to evaluate quality with basis in the user’s expectations to how a web design solves his or her needs and then pull down a business perspective, which in turn most likely will make us deviate our design from blindly living up to the users’ expectations.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.peopeo.de/quality-in-web-design-business-needs-vs-user-expectations/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>20 Websites to Help You Master User Interface Design</title>
		<link>http://www.peopeo.de/20-websites-to-help-you-master-user-interface-design/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=20-websites-to-help-you-master-user-interface-design</link>
		<comments>http://www.peopeo.de/20-websites-to-help-you-master-user-interface-design/#comments</comments>
		<pubDate>Thu, 29 Dec 2011 08:46:03 +0000</pubDate>
		<dc:creator>xiaona</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Vision Design]]></category>

		<guid isPermaLink="false">http://www.peopeo.de/?p=1691</guid>
		<description><![CDATA[As web technologies progress, websites and web applications are becoming more responsive, providing us with more ways<!--more--> ]]></description>
			<content:encoded><![CDATA[<p>As web technologies progress, websites and web applications are becoming more responsive, providing us with more ways<span id="more-1691"></span> and techniques to interact with the users<em>. Form</em>, more than ever, has been superseded by <em>function</em>.</p>
<p>The following websites deal with interface design, user experience, user-centered design, usability, and everything in between – all with the goal of enhancing the user’s interface.</p>
<h3>1. <a title="Boxes and Arrows home page." href="http://www.boxesandarrows.com/">Boxes and Arrows</a></h3>
<p><a href="http://www.boxesandarrows.com/"><img src="http://images.sixrevisions.com/2008/10/14-01_boxes_and_arrows.png" alt="Boxes and Arrows - screen shot." width="550" height="250" /></a></p>
<p>&nbsp;</p>
<p><em>Boxes and Arrows</em> is a peer-written journal and a premier source for information on interaction design, usability, and information design. You’ll find articles on<a title="Getting a Form's Structure Right: Designing Usable Online Email Applications - Boxes and Arrows: The design behind the design" href="http://boxesandarrows.com/view/getting-a-forms98">designing a usable online email application</a> to <a title="Storyboarding Rich Internet Applications with Visio - Boxes and Arrows: The design behind the design" href="http://boxesandarrows.com/view/storyboarding_rich_internet_applications_with_visio">storyboarding rich internet applications</a>.</p>
<h3>2. <a title="UX Magazine - The User Experience Magazine - home page." href="http://www.uxmag.com/">UX Magazine</a></h3>
<p><a href="http://www.uxmag.com/"><img src="http://images.sixrevisions.com/2008/10/14-02_ux_magazine.png" alt="UX Magazine - screen shot." width="550" height="250" /></a></p>
<p><em>UX Magazine</em> deals in the topic of user experience. You can expect to read articles on topics such as <a title="UX Magazine - The Layers of Design: the style layer" href="http://www.uxmag.com/design/86/the-layers-of-design-the-style-layer">designing in layers</a> and <a title="UX Magazine - Design 101 - for programmers" href="http://www.uxmag.com/design/91/design-101-for-programmers">design tips for programmers</a>.</p>
<h3>3. <a title="UXmatters :: Insights and inspiration for the user experience community - home page." href="http://www.uxmatters.com/">UXmatters</a></h3>
<p><a href="http://www.uxmatters.com/"><img src="http://images.sixrevisions.com/2008/10/14-03_uxmatters.png" alt="UXmatters - screen shot." width="550" height="250" /></a></p>
<p><em>UXmatters</em> is a non-profit web magazine devoted to sharing information on effective user experience techniques and becoming a leading resource for User Interface (UX) professionals. Some of the <a title="Topics on UXmatters." href="http://www.uxmatters.com/topics/">topics in UXmatters</a> include usability, user-centered design, web 2.0 applications, and more. You can read articles that talk about<a title="RIAs: The Technology Is Exciting, but They Really Do Help Users - UXmatters." href="http://www.uxmatters.com/MT/archives/000041.php">how rich internet applications help users</a> and the <a title="http://www.uxmatters.com/MT/archives/000068.php" href="http://www.uxmatters.com/MT/archives/000068.php">usability of search forms</a>.</p>
<h3>4. <a title="A List Apart User Science topic." href="http://alistapart.com/topics/userscience">A List Apart: User Science</a></h3>
<p><a href="http://alistapart.com/topics/userscience"><img src="http://images.sixrevisions.com/2008/10/14-04_alistapart.png" alt="A List Apart: User Science - screen shot." width="550" height="250" /></a></p>
<p>A List Apart – the leading resource on standards-based design and development articles – has a <em>User Science</em> topic that covers various parts of designing the user’s interface. The User Science topic is further sub-divided into three categories: <a title="A List Apart: Topics: User Science: Accessibility" href="http://alistapart.com/topics/userscience/accessibility/">Accessibility</a>, <a title="A List Apart: Topics: User Science: Information Architecture" href="http://alistapart.com/topics/userscience/informationarchitecture/">Information Architecture</a>, and  <a title="A List Apart: Topics: User Science: Usability" href="http://alistapart.com/topics/userscience/usability/">Usability</a>.</p>
<h3>5. <a title="Usability Post - home page." href="http://www.usabilitypost.com/">Usability Post</a></h3>
<p><a href="http://www.usabilitypost.com/"><img src="http://images.sixrevisions.com/2008/10/14-05_usability_post.png" alt="Usability Post - screen shot." width="550" height="250" /></a></p>
<p><em>Usability Post</em> is a blog about design usability. A couple of blog posts you’ll find share <a title="Usability Post » Utilize Space Efficiently for a Better UI" href="http://www.usabilitypost.com/2008/09/16/utilize-space-efficiently-for-better-ui/">tips on using white space to improve User Interface</a> and using <a title="Usability Post » How to Use Photoshop Color Profiles for Web Images" href="http://www.usabilitypost.com/2008/07/30/photoshop-color-profiles-for-web-images/">Photoshop color profiles for web images</a>.</p>
<h3>6. <a title="Usability Counts, a blog about Usability, User Experience, Information Architecture, and Social Media - home page." href="http://www.usabilitycounts.com/">Usability Counts</a></h3>
<p><a href="http://www.usabilitycounts.com/"><img src="http://images.sixrevisions.com/2008/10/14-06_usability_counts.png" alt="Usability Counts - screen shot." width="550" height="250" /></a></p>
<p><em>Usability Counts</em> is a blog by Patrick Neeman and Ha Phan, consultants on User Experience. You can expect posts that talk about the form design of airline sites and musings on <a title="Why Usability Counts | Usability Counts: Usability, User Experience, Social Media, and SharePoint" href="http://www.usabilitycounts.com/2008/03/24/hello-world/">why usability counts</a>.</p>
<h3>7. <a title="Usable Web - home page." href="http://www.usableweb.com/">Usable Web</a></h3>
<p><a href="http://www.usableweb.com/"><img src="http://images.sixrevisions.com/2008/10/14-07_usable_web.png" alt="Usable Web - screen shot." width="550" height="250" /></a></p>
<p><em>Usable Web</em> is a collection of links about User Interface design topics as it pertains to the web. Although it’s no longer updated and many of the articles are outdated, you’ll still find timeless resources and articles on the site.</p>
<h3>8. <a href="http://www.uie.com/">User Interface Engineering</a></h3>
<p><a href="http://www.uie.com/"><img src="http://images.sixrevisions.com/2008/10/14-08_user_interface_engineering.png" alt="User Interface Engineering - screen shot." width="550" height="250" /></a></p>
<p><em>User Interface Engineering</em> is the research, training and consulting firm that holds the annual <a title="User Interface 13 Conference" href="http://www.uie.com/events/uiconf/2008/">User Interface Conference</a>. The <a href="http://www.uie.com/articles/">Articles</a> section of their website hosts plenty of articles on the topic of User Interface design. Some topics covered are <a title="3 Important Usability Challenges for Designing Web Apps" href="http://www.uie.com/articles/web_app_challenges/">usability challenges of designing web apps</a> and <a title="Account Sign-in: 8 Design Mistakes to Avoid" href="http://www.uie.com/articles/account_design_mistakes/">design mistakes with account sign-in</a> that designers should avoid.</p>
<h3>9. <a href="http://www.lukew.com/ff/">Functioning Form</a></h3>
<p><a href="http://www.lukew.com/ff/"><img src="http://images.sixrevisions.com/2008/10/14-09_functioning_form.png" alt="Functioning Form - screen shot." width="550" height="250" /></a></p>
<p><em>Functioning Form</em> is an interaction design blog by internationally-recognized web professional and author <a title="Functioning Form - About." href="http://www.lukew.com/ff/about.asp">Luke Wroblewski</a>. Some posts you’ll find in Functioning Form include &#8220;<a title="Functioning Form - Web Form Design: British Airways" href="http://www.lukew.com/ff/entry.asp?589">Web Form Design: British Airways</a>&#8221; and &#8220;<a title="Functioning Form - Sign-Up Form Patterns" href="http://www.lukew.com/ff/entry.asp?702">Sign-Up Form Patterns</a>&#8220;.</p>
<h3>10. <a title="useit.com - Jakob Nielsen on Usability and Web Design - home page." href="http://www.useit.com/">useit.com</a></h3>
<p><a href="http://www.useit.com/"><img src="http://images.sixrevisions.com/2008/10/14-10_useit.png" alt="useit.com - screen shot." width="550" height="250" /></a></p>
<p><em>useit.com</em> is the website of Jakob Nielsen, a leading expert on usability. Check out the <a title="Alertbox: Jakob Nielsen's Newsletter on Web Usability" href="http://www.useit.com/alertbox/">Alertbox</a> section, a bi-weekly column about current issues on usability.</p>
<h3>11. <a title="InfoDesign - Understanding by Design - home page." href="http://www.informationdesign.org/">InfoDesign</a></h3>
<p><a href="http://www.informationdesign.org/"><img src="http://images.sixrevisions.com/2008/10/14-11_infodesign.png" alt="InfoDesign - screen shot." width="550" height="250" /></a></p>
<p><em>InfoDesign</em> is a website that covers the topic of information design. Some categories on InfoDesign include <a title="InfoDesign: Understanding by Design - News | Accessibility" href="http://www.informationdesign.org/archives/cat_accessibility.php">Accessibility</a>, <a title="InfoDesign: Understanding by Design - News | Usability" href="http://www.informationdesign.org/archives/cat_usability.php">Usability</a>, and <a title="InfoDesign: Understanding by Design - News | User experience" href="http://www.informationdesign.org/archives/cat_user_experience.php">User Experience</a>.</p>
<h3>12. <a title="Designing Interfaces - home page." href="http://designinginterfaces.com/About_the_Book">Designing Interfaces</a></h3>
<p><a href="http://designinginterfaces.com/About_the_Book"><img src="http://images.sixrevisions.com/2008/10/14-12_designing_interfaces.png" alt="Designing Interfaces - screen shot." width="550" height="250" /></a></p>
<p><em>Designing Interfaces</em> is an online book constructed using excerpts from <a title="Google Book Search entry - Designing Interfaces: [patterns for Effective Interaction Design]" href="http://books.google.com/books?id=oCTSeKfMaWUC">O’Reilly’s </a><br />
<a title="Google Book Search entry - Designing Interfaces: [patterns for Effective Interaction Design]" href="http://books.google.com/books?id=oCTSeKfMaWUC">Designing Interfaces: Patterns for Effective Interaction Design</a>.</p>
<h3>13. <a title="Usability.gov - home page." href="http://www.usability.gov/">Usability.gov</a></h3>
<p><a href="http://www.usability.gov/"><img src="http://images.sixrevisions.com/2008/10/14-13_usability_dot_gov.png" alt="Usability.gov - screen shot." width="550" height="250" /></a></p>
<p><em>Usability.gov</em> is the primary government source for usability and user-centered design by the U.S. Department of Health and Human Services. You can read about the <a title="http://www.usability.gov/basics/" href="http://www.usability.gov/basics/">basics of usability</a> and <a title="Usability Methods | Usability.gov" href="http://www.usability.gov/methods/">usability methods</a> on the site.</p>
<h3>14. <a title="Usability First: Usability in Website and Software Design" href="http://www.usabilityfirst.com/">Usability First</a></h3>
<p><a href="http://www.usabilityfirst.com/"><img src="http://images.sixrevisions.com/2008/10/14-14_usability_first.png" alt="Usability First - screen shot." width="550" height="250" /></a></p>
<p><em>Usability First</em> seeks to provide valuable information on usability as it pertains to websites and applications. Usability First has several sections including <a title="Usability First: Website Design" href="http://www.usabilityfirst.com/websites/index.txl">Website Design</a>, <a href="http://www.usabilityfirst.com/roi/index.txl">Usability ROI</a> (Return of Investment), and <a title="Usability First: Accessibility" href="http://www.usabilityfirst.com/accessibility/index.txl">Accessibility</a>.</p>
<h3>15. <a title="Design with Intent - Architectures of Control - Dan Lockton - home page." href="http://architectures.danlockton.co.uk/">Design with Intent</a></h3>
<p><a href="http://architectures.danlockton.co.uk/"><img src="http://images.sixrevisions.com/2008/10/14-15_design_with_intent.png" alt="Design with Intent - screen shot." width="550" height="250" /></a></p>
<p><em>Design with Intent</em> is a blog by <a href="http://architectures.danlockton.co.uk/dan-lockton/">Dan Lockton</a> that talks about the topic of understanding user interaction and influencing it.</p>
<h3>16. <a title="Pattern Tap - Interface Collection for Design Inspiration - home page." href="http://patterntap.com/">Pattern Tap</a></h3>
<p><a href="http://patterntap.com/"><img src="http://images.sixrevisions.com/2008/10/14-16_pattern_tap.png" alt="Pattern Tap - screen shot." width="550" height="250" /></a></p>
<p>There’s no better way to learn how to design effective user interfaces than to see how other designers do it. <em>Pattern Tap</em> is a showcase of popular interface design for inspiration. You’ll find collections of <a title="Pattern Tap - Forms collection." href="http://patterntap.com/tap/collection/forms">Forms</a>, <a title="Pattern Tap - login collection." href="http://patterntap.com/tap/collection/login">Login</a>, <a title="Pattern Tap - subnavigation collection." href="http://patterntap.com/tap/collection/subnavigation">Subnavigation</a>, <a title="Pattern Tap - buttons collection." href="http://patterntap.com/tap/collection/buttons">Buttons</a>, among other design patterns.</p>
<h3>17. <a title="Interaction Design Pattern Library - Welie.com - home page." href="http://www.welie.com/patterns/index.php">Welie.com</a></h3>
<p><a href="http://www.welie.com/patterns/index.php"><img src="http://images.sixrevisions.com/2008/10/14-17_welie_dot_com.png" alt="Welie.com - screen shot." width="550" height="250" /></a></p>
<p>Welie.com’s <em>Interaction Design Pattern Library</em> shares design patterns in interaction design. You can find design patterns such as <a title="Breadcrumbs - Interaction Design Pattern Library - Welie.com" href="http://www.welie.com/patterns/showPattern.php?patternID=crumbs">Breadcrumbs</a>, <a title="Tabs - Interaction Design Pattern Library - Welie.com" href="http://www.welie.com/patterns/showPattern.php?patternID=tabbing">Tabs</a>, and<a title="Comment Box - Interaction Design Pattern Library - Welie.com" href="http://www.welie.com/patterns/showPattern.php?patternID=comment-box">Comment Box</a> as part of the library.</p>
<h3>18. <a title="UI-patterns.com" href="http://ui-patterns.com/">UI-patterns</a></h3>
<p><a href="http://ui-patterns.com/"><img src="http://images.sixrevisions.com/2008/10/14-18_ui_patterns.png" alt="UI-patterns - screen shot." width="550" height="250" /></a></p>
<p><em>UI-patterns</em> is another top-notch User Interface library that collects and showcases reoccurring design patterns such as <a title="Captcha - UI-patterns.com" href="http://ui-patterns.com/pattern/Captcha">Captchas</a>, <a title="Account Registration - UI-patterns.com" href="http://ui-patterns.com/pattern/AccountRegistration">Account Registrations</a>, and<a title="Navigation Tabs - UI-patterns.com" href="http://ui-patterns.com/pattern/NavigationTabs">Navigation Tabs</a>.</p>
<h3>19. <a title="UI Pattern Factory - home page." href="http://uipatternfactory.com/">UI Pattern Factory</a></h3>
<p><a href="http://uipatternfactory.com/"><img src="http://images.sixrevisions.com/2008/10/14-19_ui_pattern_factory.png" alt="UI Pattern Factory - screen shot." width="550" height="250" /></a></p>
<p><em>UI Pattern Factory</em> is both a UI pattern library and a UI gallery. It showcases and discusses patterns such as <a title="Stacked Tabs | UI Pattern Factory" href="http://uipatternfactory.com/p=stacked-tabs/">Stacked Tabs</a>, <a title="Carousel | UI Pattern Factory" href="http://uipatternfactory.com/p=carousel/">Carousels</a>, and <a title="Edit-In-Place | UI Pattern Factory" href="http://uipatternfactory.com/p=edit-in-place/">Edit-In-Place</a>.</p>
<h3>20. <a title="Yahoo! Design Pattern Library" href="http://developer.yahoo.com/ypatterns/">Yahoo! Design Pattern Library</a></h3>
<p><a href="http://developer.yahoo.com/ypatterns/"><img src="http://images.sixrevisions.com/2008/10/14-20_ydn_design_pattern_library.png" alt="Yahoo! Design Pattern Library - screen shot." width="550" height="250" /></a></p>
<p>(<a title="http://sixrevisions.com/usabilityaccessibility/20-websites-to-help-you-master-user-interface-design/" href="http://sixrevisions.com/usabilityaccessibility/20-websites-to-help-you-master-user-interface-design/">http://sixrevisions.com/usabilityaccessibility/20-websites-to-help-you-m&#8230;</a>)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.peopeo.de/20-websites-to-help-you-master-user-interface-design/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Shengbo Website——Transferring the Colors of Life</title>
		<link>http://www.peopeo.de/shengbo-website%e2%80%94%e2%80%94transferring-the-colors-of-life/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=shengbo-website%25e2%2580%2594%25e2%2580%2594transferring-the-colors-of-life</link>
		<comments>http://www.peopeo.de/shengbo-website%e2%80%94%e2%80%94transferring-the-colors-of-life/#comments</comments>
		<pubDate>Tue, 06 Dec 2011 07:19:27 +0000</pubDate>
		<dc:creator>xiaona</dc:creator>
				<category><![CDATA[Blog]]></category>
		<category><![CDATA[Interaction Design]]></category>
		<category><![CDATA[Peopeo News]]></category>

		<guid isPermaLink="false">http://www.peopeo.de/?p=1582</guid>
		<description><![CDATA[As a design company, Peopeo never forgets its social responsibility and always treats making service for commonweal as long term aim and mission.[...]]]></description>
			<content:encoded><![CDATA[<p>As a design company, Peopeo never forgets its social responsibility and always treats making service for commonwealth as long term aim and mission.<span id="more-1582"></span>   In 2010,Peopeo received the invitation to design the Shengbo Webiste from 1+1, an organization specially servicing the blind and those with poor eyesight .Their services includes shengbo broadcast station and blind photos etc. Shengbo Website is a platform planned for the blind to share audios and make friends. Knowing Peopeo’s philosophy of making contributions for the commonweal and peopeo’s professional UI and UE design ability ,1+1 entrusted Peopeo with the task. Peopeo decided to do it pro bono. At the beginning, UE designers of Peopeo did a lot of analysis and research of the blinds’ habit and operations of surfing the internet. And they also went into the blinds’ real working and living environments .By observing and interviewing, UE designers found their deep requirements. Besides that, designers analyzed some good blind local and international websites. They also did the comparison to find the advantages and disadvantages of each website. Moreover , we referred to the local and international design standards that served as important guidelines for the designing of Shengbo websites.<br />
<wbr> At the end of 2010,the design process was over but the whole project was not yet. We made the high prototype and invited the blind to use it.Then we summarized and analyzed the collected data and perfected the design further. After some testing like this, the whole project was finished finally. In 201,we took charge of developing of the website. With some months’ effort, the website launched . The followings are the innovations of UI of the websites:</wbr></p>
<ol>
<li>Multi-channel interface: multi-channel user interface applications, the results of adhering to the ‘Science and Technology crosses over the barrier’ concept, and making full use of network and information accessibility. This has provided not only the disabled but also abled bodied man a more user-friendly interface.</li>
<li>One screen operating concept: Simple interface that makes use of the one screen operating concept, menu navigation and the main function buttons placed on a fixed position on the page. User-friendly and convenient to switch pages and view information. In line with trends in ICT development, multimedia touch-screen interfaces and applied to the analog signal access development.</li>
<li>Unique presentation of content, the page that need frequent changing of features and content in the fixed framed area, reducing the user’s visual focus to not have long attention other areas of the page. Simplified list of titles allows users to conveniently determine their location and quickly find information</li>
<li>Enhanced visual information elements: for low vision users, using clear fonts and large icons and high contrast. Simple icon and text navigation for easy identifying and understanding</li>
<li>Barrier-free Sidebar: For low vision users to display their content requests. We implemented a barrier-free design aid toolbars at fixed positions at all of our webpages, for the users to easily switch the skins, adjust the font size, color scheme or choose the zoom level of the magnifying glass</li>
</ol>
<p>&nbsp;</p>
<p><wbr> In 2011,Shengbo Website won the award of “Xin word Commonweal Innovation ”</wbr></p>
<p>The process of designing the Shengbo Website makes us more professional in researching about the blinds’ habits and requirements, and makes us aware of our social innovation responsibility . We believe that innovation can help make our life better and responsibility can promote change.</p>
<p>The following is a video of Shengbo Website designed by Peopeo. We need your support in the Shengbo Website and we welcome you to join us in the service for the disabled.</p>
<p><center></p>
<p>    <object type="application/x-shockwave-flash" data="http://www.tudou.com/v/wjIdCIYuJh0" width="480"  height="400"><param name="movie" value="http://www.tudou.com/v/wjIdCIYuJh0" /><param name="quality" value="high" /><param name="allowFullScreen" value="true" /><param name="allowScriptAccess" value="always" /><param name="pluginspage" value="http://www.macromedia.com/go/getflashplayer" /><param name="autoplay" value="false" /><param name="autostart" value="false" /><embed src="http://www.tudou.com/v/wjIdCIYuJh0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="400"></embed></object></center></p>
]]></content:encoded>
			<wfw:commentRss>http://www.peopeo.de/shengbo-website%e2%80%94%e2%80%94transferring-the-colors-of-life/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

