<?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>AndroidUX Tips &#8211; Wiebe Elsinga</title>
	<atom:link href="http://wiebe-elsinga.com/blog/category/androidux-tips/feed/" rel="self" type="application/rss+xml" />
	<link>http://wiebe-elsinga.com/blog</link>
	<description>Blog</description>
	<lastBuildDate>Fri, 05 Jun 2015 08:58:31 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=5.8</generator>
	<item>
		<title>Design/Prototyping tools for Android</title>
		<link>http://wiebe-elsinga.com/blog/designprototyping-tools-for-android/</link>
					<comments>http://wiebe-elsinga.com/blog/designprototyping-tools-for-android/#respond</comments>
		
		<dc:creator><![CDATA[W.Elsinga]]></dc:creator>
		<pubDate>Fri, 05 Jun 2015 01:58:31 +0000</pubDate>
				<category><![CDATA[AndroidUX Tips]]></category>
		<category><![CDATA[Android]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[Tool]]></category>
		<guid isPermaLink="false">http://wiebe-elsinga.com/blog/?p=1826</guid>

					<description><![CDATA[For developers getting the right Android developing tool is easy, it&#8217;s either Android Studio or Eclipse. For designing/prototyping Android applications it&#8217;s a bit more tricky. There are a lot of products/tools you can use, all with different features, prices and usability. So let us look at some Design/Prototyping tools: Sketch 3 (Bohemian Coding) Sketch 3 is a Vector based design application. It&#8217;s easy to use, and has a low learning curve. Think of a user friendly mix of Photoshop and Illustrator You have the possibility to use a ton of]]></description>
										<content:encoded><![CDATA[<p>For developers getting the right Android developing tool is easy, it&#8217;s either Android Studio or Eclipse.<br />
For designing/prototyping Android applications it&#8217;s a bit more tricky. There are a lot of products/tools you can use, all with different features, prices and usability.</p>
<p>So let us look at some Design/Prototyping tools:<br />
<span id="more-1826"></span></p>
<h3>Sketch 3 (Bohemian Coding)</h3>
<p><img loading="lazy" src="http://wiebe-elsinga.com/blog/wp-content/uploads/2015/06/Sketch3.png" alt="Sketch3" width="640" height="378" class="aligncenter size-full wp-image-1834" data-wp-pid="1834" srcset="http://wiebe-elsinga.com/blog/wp-content/uploads/2015/06/Sketch3.png 640w, http://wiebe-elsinga.com/blog/wp-content/uploads/2015/06/Sketch3-300x177.png 300w" sizes="(max-width: 640px) 100vw, 640px" /><br />
<a href="http://bohemiancoding.com/sketch/" target="_blank">Sketch 3</a> is a Vector based design application. It&#8217;s easy to use, and has a low learning curve. Think of a user friendly mix of Photoshop and Illustrator<br />
You have the possibility to use a ton of <a href"http:>plugins</a> to make the design experience even greater.<br />
And using the <a href="http://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bzhp5Z4wHba3M25veVdZRHNHT0k/stickersheet_general.sketch" target="_blank">template components for Material Design</a> should make designing great applications fun.</p>
<p><strong>Price:</strong> $99<br />
<strong>Makes me happy because:</strong></p>
<ul>
<li>Easy to use, no high learning curve</li>
<li>Support plugins</li>
<li>Many templates are available</li>
</ul>
<p>
<strong>Makes me sad because:</strong></p>
<ul>
<li>Updates can break created designs</li>
<li>So support for live viewing on an actual Android device</li>
</ul>
<h3>Illustrator (Adobe)</h3>
<p><img loading="lazy" src="http://wiebe-elsinga.com/blog/wp-content/uploads/2015/06/Illustrator.png" alt="Illustrator" width="640" height="378" class="aligncenter size-full wp-image-1837" data-wp-pid="1837" srcset="http://wiebe-elsinga.com/blog/wp-content/uploads/2015/06/Illustrator.png 640w, http://wiebe-elsinga.com/blog/wp-content/uploads/2015/06/Illustrator-300x177.png 300w" sizes="(max-width: 640px) 100vw, 640px" /><br />
<a href="http://www.adobe.com/products/illustrator.html" target="_blank">Adobe Illustrator</a> is also a Vector based design application. It contains a lot of features for the skilled designer. But if you are a Illustrator newbie, you can be overwhelmed by all the possibilities and options available.<br />
As with Sketch 3 they also have a <a href="https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0Bzhp5Z4wHba3YlIzblpPcnlFb0E/stickersheet_general.ai" target="_blank">template components for Material Design</a> which you can use.</p>
<p><strong>Price:</strong> €24.19 per month for just Illustrator (or €69.49 per month for entire Creative Cloud suite)<br />
<strong>Makes me happy because:</strong></p>
<ul>
<li>Focus on screen design</li>
<li>Many templates are available</li>
</ul>
<p>
<strong>Makes me sad because:</strong></p>
<ul>
<li>Learning curve is to high</li>
<li>So expensive</li>
</ul>
<h3>Flinto</h3>
<p><img loading="lazy" src="http://wiebe-elsinga.com/blog/wp-content/uploads/2015/06/mobile_prototyping_tool_flinto.jpg" alt="mobile_prototyping_tool_flinto" width="640" height="400" class="aligncenter size-full wp-image-1839" data-wp-pid="1839" srcset="http://wiebe-elsinga.com/blog/wp-content/uploads/2015/06/mobile_prototyping_tool_flinto.jpg 640w, http://wiebe-elsinga.com/blog/wp-content/uploads/2015/06/mobile_prototyping_tool_flinto-300x188.jpg 300w" sizes="(max-width: 640px) 100vw, 640px" /><br />
<a href="https://www.flinto.com" target="_blank">Flinto</a> is designed as a tool for creating interactive prototypes based on PNG’s. Just link your PNG&#8217;s that you have created to screens and set transitions for that app-like feeling.</p>
<p><strong>Price:</strong> €20 per month<br />
<strong>Makes me happy because:</strong></p>
<ul>
<li>Ease of use for prototyping</li>
<li>Great transitions</li>
</ul>
<p>
<strong>Makes me sad because:</strong></p>
<ul>
<li>You can only use it for prototyping</li>
<li>Kind of pricey</li>
</ul>
<h3>Marvelapp</h3>
<p><img loading="lazy" src="http://wiebe-elsinga.com/blog/wp-content/uploads/2015/06/mobile_prototyping_tool_marvelapp.jpg" alt="mobile_prototyping_tool_marvelapp" width="640" height="400" class="aligncenter size-full wp-image-1841" data-wp-pid="1841" srcset="http://wiebe-elsinga.com/blog/wp-content/uploads/2015/06/mobile_prototyping_tool_marvelapp.jpg 640w, http://wiebe-elsinga.com/blog/wp-content/uploads/2015/06/mobile_prototyping_tool_marvelapp-300x188.jpg 300w" sizes="(max-width: 640px) 100vw, 640px" /><br />
<a href="https://marvelapp.com" target="_blank">Marvelapp</a> links your prototype with Dropbox to create an interactive prototype on your mobile device or desktop. No need to code or save PNG&#8217;s as images.<br />
It&#8217;s easy to use, and can be used with different Vector based design applications. You can even export your prototype to a runnable APK.</p>
<p><strong>Price:</strong> starts from €0 per month to €100 per month.<br />
<strong>Makes me happy because:</strong></p>
<ul>
<li>Ease of use for prototyping</li>
<li>Great UI</li>
<li>Exportable APK&#8217;s</li>
</ul>
<p>
<strong>Makes me sad because:</strong></p>
<ul>
<li>No unlimited exportable APK&#8217;s</li>
</ul>
<h3>Keynotopia</h3>
<p>If you know how to use Keynote or Powerpoint, you may want to use <a href="http://keynotopia.com" target="_blank">Keynotopia</a>. Keynotopia is a library that contains UI components.<br />
So you don&#8217;t need to know how to use a different design tool, just drag en drop your UI components to make your design.</p>
<p><strong>Price:</strong> €49 if you are just interested in Android design.<br />
<strong>Makes me happy because:</strong></p>
<ul>
<li>No need to learn a new tool</li>
<li>Free life time updates</li>
</ul>
<p>
<strong>Makes me sad because:</strong></p>
<ul>
<li>UI components aren&#8217;t updated regularly</li>
<li>Still no Android preview app available</li>
</ul>
<h3>Pen and paper</h3>
<p>Last but not least, you can just you a pen and a piece of paper to do your design. It&#8217;s doesn&#8217;t need to be a paid app or service to start designing awesome designs.</p>
<p><strong>Price:</strong> €1.<br />
<strong>Makes me happy because:</strong></p>
<ul>
<li>No limitations</li>
</ul>
<p>Also available:<br />
<a href="http://www.invisionapp.com/" target="_blank">InVision</a>, <a href="https://proto.io/" target="_blank">Proto.io</a>, <a href="https://popapp.in/" target="_blank">POP</a>, <a href="https://www.uxpin.com/" target="_blank">UXPin</a>, <a href="http://www.fieldtest.it/" target="_blank">FieldTest</a></p>
<p><center><img width="320" src="http://i.giphy.com/5fBH6zoy1szfjORd14s.gif"/></center></p>
<p>finally let me give you one advice, if you have no previous graphic design experience then I would suggest that you mastering the basics of graphic design first.<br />
Once you are comfortable with the basics then you can start to look into designing with a specific tool.</p>
]]></content:encoded>
					
					<wfw:commentRss>http://wiebe-elsinga.com/blog/designprototyping-tools-for-android/feed/</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Tips on how to improve your ‪Android‬ ‪UX</title>
		<link>http://wiebe-elsinga.com/blog/improve-your-android-ux/</link>
		
		<dc:creator><![CDATA[W.Elsinga]]></dc:creator>
		<pubDate>Fri, 08 May 2015 03:59:54 +0000</pubDate>
				<category><![CDATA[AndroidUX Tips]]></category>
		<category><![CDATA[Business]]></category>
		<category><![CDATA[Android]]></category>
		<category><![CDATA[Design]]></category>
		<category><![CDATA[UX]]></category>
		<guid isPermaLink="false">http://wiebe-elsinga.com/blog/?p=1786</guid>

					<description><![CDATA[During recent Android app clinics I hosted and/or attended, I started noticing developers/designers implement some common UX flaws and found myself questioning if they know how to do proper UX. Some of those Android applications I&#8217;ve seen are really well thought out from a technical point of view, but lack good UX. So maybe I should share some techniques/tips on how to improve the UX. 1) Analyze Do some analysis on your current (or future) UX design. As designer and/or developer we tend to think we know everything, but we don&#8217;t. Your application may be used differently than you might think. Knowing how users are using or will use your application is valid information in making a good UX design, as the focus is, and always should be, the user. Do usability tests to discover problems or bottle-necks in your design. This can be done by actually sitting down with a user and observe his/her behavior while he/she is using your application or prototype. Use analyzing tools like Google analytics to find how user are using your application, so you know the user focus (or lack of) inside your application. Or just look around how people are using there device to know basic human-device interaction. A good example might be when you application is using the camera as feature. You&#8217;ve probably seen that &#8220;selfiesticks&#8221; are becoming more populair, so your application might be needing front-camera support as well. And finally have a look at user reviews in Google Play. They might supply you with vital information on how to make your users happy (and getting good ratings at the same time). 2) (Re)Think It might be a good idea to have a second (or third) look at your current UX design and re-think. Try to look for these bad UX omens: Additional texts to explain how it elements work. You can&#8217;t document your way out of confusing UX. Novel paradigms. Stick to known patterns, so users feel quickly at ease. FAQ section. The information presented to the user should be obvious and clear. &#8220;Pop-ups&#8221;, like a confirm dialog. Don&#8217;t block the UX. Don&#8217;t say that something is dangerous if you can&#8217;t fix the danger. Do support &#8220;undo&#8221;. Too much information. Keep it simple (is always the hardest to do). So how can you test if your new UX is wel thought out you may ask, well: You might want to prototype your new UX design first in stead of rewriting your app. This is quick and easy to do and can test if your redesign has been improved. Try doing A/B testing so you can compare the new design against your current one. Testing eliminates guesswork and turns &#8220;I think&#8221; into &#8220;I know&#8221;. 3) Adapt As described in the previous section it&#8217;s important to stick to known patterns, so the user can quickly become acquainted with your application features. Adapting platform standards is the way to go. And Google has done a great job with the introduction of Material Design, by suppling us with well thought out UX design patterns. Learn these pattern and apply them to your UX design. One question I get asked a lot is when an application is adapting Material design will it still contain its uniqueness and will my branding survive. My answer is yes. Branding can by maintained by: The application or product icon. Use of colors. And the actual application itself, meaning your brand should be reflected in the application. Let me explain this by giving you an example giving to me by Marie Schweiz about her redesign of the Top Gear application. The succes of Top Gear (brand) is not the cars, but the three guys hosting it and the fun they have with cars. This should be reflected in the UX design, so make if playful. 4) Add It might sounds strange, adding features to transform UX design, but it&#8217;s not. Let me be clear, I&#8217;m not talking about adding more content but adding features like feedback, value and user aid. So you can add: Interaction feedback, which gives the user confidence that he/she is using the content correctly Error feedback, which warns the user and a possible solution. But be careful not to block the user while giving this type of feedback. Loading feedback, which gives the user options, should I wait or just continue. Again don&#8217;t block the user. Action aid, which gives the the user the option to &#8220;undo stupidity&#8221; If you want to know more, you may want to visit: Google Material design introduction User testing explained, part 1 User testing explained, part 2 Android UI/UX website by Taylor Ling Android UI patterns website by Juhani Lehtimäki Udacity course: UX Design for Mobile Developers Google design Youtube channel I really want to thank my friend and colleague Ali Derbane for reviewing this post]]></description>
										<content:encoded><![CDATA[<p>During recent Android app clinics I hosted and/or attended, I started noticing developers/designers implement some common UX flaws and found myself questioning if they know how to do proper UX.<br />
Some of those Android applications I&#8217;ve seen are really well thought out from a technical point of view, but lack good UX.</p>
<p>So maybe I should share some techniques/tips on how to improve the UX.<br />
<span id="more-1786"></span><br />
<center><img width="320" src="http://i.giphy.com/rV4guAJUoU6Vq.gif"/></center></p>
<h3>1) Analyze</h3>
<p>Do some analysis on your current (or future) UX design. As designer and/or developer we tend to think we know everything, but we don&#8217;t. Your application may be used differently than you might think.<br />
Knowing how users are using or will use your application is valid information in making a good UX design, as the focus is, and always should be, the user.  </p>
<ul>
<li><strong>Do usability tests</strong> to discover problems or bottle-necks in your design. This can be done by actually sitting down with a user and observe his/her behavior while he/she is using your application or prototype. </li>
<li><strong>Use analyzing tools</strong> like Google analytics to find how user are using your application, so you know the user focus (or lack of) inside your application.</li>
<li>Or just <strong>look around</strong> how people are using there device to know basic human-device interaction. A good example might be when you application is using the camera as feature. You&#8217;ve probably seen that &#8220;selfiesticks&#8221; are becoming more populair, so your application might be needing front-camera support as well.</li>
<li>And finally have a <strong>look at user reviews</strong> in Google Play. They might supply you with vital information on how to make your users happy (and getting good ratings at the same time).</li>
</ul>
<p></p>
<h3>2) (Re)Think</h3>
<p>It might be a good idea to have a second (or third) look at your current UX design and re-think.<br />
Try to look for these bad UX omens:</p>
<ul>
<li><em>Additional texts</em> to explain how it elements work. You can&#8217;t document your way out of confusing UX.</li>
<li><em>Novel paradigms</em>. Stick to known patterns, so users feel quickly at ease.</li>
<li><em>FAQ section</em>. The information presented to the user should be obvious and clear.</li>
<li><em>&#8220;Pop-ups&#8221;</em>, like a confirm dialog. Don&#8217;t block the UX. Don&#8217;t say that something is dangerous if you can&#8217;t fix the danger. Do support &#8220;undo&#8221;.</li>
<li><em>Too much information</em>. Keep it simple (is always the hardest to do).</li>
</ul>
<p>
So how can you test if your new UX is wel thought out you may ask, well:</p>
<ul>
<li>You might want to <strong>prototype</strong> your new UX design first in stead of rewriting your app. This is quick and easy to do and can test if your redesign has been improved. </li>
<li>Try doing <strong>A/B testing</strong> so you can compare the new design against your current one. Testing eliminates guesswork and turns &#8220;I think&#8221; into &#8220;I know&#8221;.</li>
</ul>
<p></p>
<h3>3) Adapt</h3>
<p>As described in the previous section it&#8217;s important to stick to known patterns, so the user can quickly become acquainted with your application features.<br />
Adapting platform standards is the way to go. And Google has done a great job with the introduction of Material Design, by suppling us with well thought out UX design patterns.<br />
Learn these pattern and apply them to your UX design.<br />
One question I get asked a lot is when an application is adapting Material design will it still contain its uniqueness and will my branding survive. My answer is yes.<br />
<center><img width="320" src="http://i.giphy.com/12nuDeDV4xU3yE.gif"/></center><br />
Branding can by maintained by: </p>
<ul>
<li>The application or product icon.</li>
<li>Use of colors. </li>
<li>And the actual application itself, meaning your brand should be reflected in the application. </li>
</ul>
<p>
Let me explain this by giving you an example giving to me by <a href="https://plus.google.com/+MarieSchweiz" target="_blank">Marie Schweiz</a> about her redesign of the Top Gear application.<br />
The succes of <a href="http://www.topgear.com/">Top Gear</a> (brand) is not the cars, but the three guys hosting it and the fun they have with cars. This should be reflected in the UX design, so make if playful.<br />
</p>
<h3>4) Add</h3>
<p>It might sounds strange, adding features to transform UX design, but it&#8217;s not. Let me be clear, I&#8217;m not talking about adding more content but adding features like feedback, value and user aid.<br />
So you can add:</p>
<table>
<tr>
<td style="vertical-align:middle">
			<video src="http://wiebe-elsinga.com/blog/wp-content/uploads/2015/05/shamuLMY47DWiebe05082015095543.mp4" id="id0" width="200" onMouseOver="id0.play()" onMouseOut="id0.pause()" onclick="window.location='http://wiebe-elsinga.com/blog/wp-content/uploads/2015/05/shamuLMY47DWiebe05082015095543.mp4';id0.pause()" loop></video>
		</td>
<td style="vertical-align:middle">
			<strong>Interaction feedback</strong>, which gives the user confidence that he/she is using the content correctly
		</td>
</tr>
<tr>
<td style="vertical-align:middle">
			<a href="http://wiebe-elsinga.com/blog/wp-content/uploads/2015/05/shamuLMY47DWiebe05082015102326.png" rel="lightbox[1786]" title="Tips on how to improve your ‪Android‬ ‪UX"><br />
				<img src="http://wiebe-elsinga.com/blog/wp-content/uploads/2015/05/shamuLMY47DWiebe05082015102326.png" width="300" class="aligncenter" /><br />
			</a>
		</td>
<td style="vertical-align:middle">
			<strong>Error feedback</strong>, which warns the user and a possible solution. But be careful not to block the user while giving this type of feedback.
		</td>
</tr>
<tr>
<td style="vertical-align:middle">
			<video src="http://wiebe-elsinga.com/blog/wp-content/uploads/2015/05/shamuLMY47DWiebe05082015102824.mp4" id="id3" width="200" onMouseOver="id3.play()" onMouseOut="id3.pause()" onclick="window.location='http://wiebe-elsinga.com/blog/wp-content/uploads/2015/05/shamuLMY47DWiebe05082015102824.mp4';id3.pause()" loop></video>
		</td>
<td style="vertical-align:middle">
			<strong>Loading feedback</strong>, which gives the user options, should I wait or just continue. Again don&#8217;t block the user.
		</td>
</tr>
<tr>
<td style="vertical-align:middle">
			<video src="http://wiebe-elsinga.com/blog/wp-content/uploads/2015/05/shamuLMY47DWiebe05082015104350.mp4" id="id4" width="200" onMouseOver="id4.play()" onMouseOut="id4.pause()" onclick="window.location='http://wiebe-elsinga.com/blog/wp-content/uploads/2015/05/shamuLMY47DWiebe05082015104350.mp4';id4.pause()" loop></video>
		</td>
<td style="vertical-align:middle">
			<strong>Action aid</strong>, which gives the the user the option to &#8220;undo stupidity&#8221;
		</td>
</tr>
</table>
<p>If you want to know more, you may want to visit:</p>
<ul>
<li><a href="http://www.google.com/design/spec/material-design/introduction.html" target="_blank">Google Material design introduction</a></li>
<li><a href="http://thenextweb.com/creativity/2015/04/27/user-testing-explained/" target="_blank">User testing explained, part 1</a></li>
<li><a href="http://thenextweb.com/dd/2015/04/28/user-testing-explained-part-two/" target="_blank">User testing explained, part 2</a></li>
<li><a href="http://androiduiux.com/" target="_blank">Android UI/UX</a> website by <a href="https://plus.google.com/+TaylorLing" target="_blank">Taylor Ling</a></li>
<li><a href="http://www.androiduipatterns.com/ http://www.androiduipatterns.com/" target="_blank">Android UI patterns</a> website by <a href="https://plus.google.com/+JuhaniLehtimäki" target="_blank">Juhani Lehtimäki</a></li>
<li>Udacity course: <a href="https://www.udacity.com/wiki/ud849" target="_blank">UX Design for Mobile Developers</a></li>
<li><a href="https://www.youtube.com/channel/UClKO7be7O9cUGL94PHnAeOA" target="_blank">Google design Youtube channel</a></li>
</ul>
<p>
I really want to thank my friend and colleague <a href="https://plus.google.com/+AliDerbane" target="_blank">Ali Derbane</a> for reviewing this post </p>
]]></content:encoded>
					
		
		<enclosure url="http://wiebe-elsinga.com/blog/wp-content/uploads/2015/05/shamuLMY47DWiebe05082015095543.mp4" length="1161987" type="video/mp4" />
<enclosure url="http://wiebe-elsinga.com/blog/wp-content/uploads/2015/05/shamuLMY47DWiebe05082015102824.mp4" length="603187" type="video/mp4" />
<enclosure url="http://wiebe-elsinga.com/blog/wp-content/uploads/2015/05/shamuLMY47DWiebe05082015104350.mp4" length="1593388" type="video/mp4" />

			</item>
	</channel>
</rss>
