{"id":13480,"date":"2015-03-16T05:08:44","date_gmt":"2015-03-15T18:08:44","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=13480"},"modified":"2015-03-16T05:08:44","modified_gmt":"2015-03-15T18:08:44","slug":"android-app-learning-programming-ux-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/android-app-learning-programming-ux-primer-tutorial\/","title":{"rendered":"Android App Learning Programming UX Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Android\/LP-Android-Question.jpg\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Android App Learning Programming UX Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Android\/LP-Android-Question.jpg\" title=\"Android App Learning Programming UX Primer Tutorial\" id='aux' onmouseover=\" this.src=this.src.replace('-Android-GetToQuestion.jpg','-Android-Question.xjpg').replace('-Android-Question.jpg','-iPad-GetToQuestion.xjpg').replace('-iPad-GetToQuestion.jpg','-iPad-Question.xjpg').replace('-iPad-Question.jpg','-Laptop-GetToQuestion.xjpg').replace('-Laptop-GetToQuestion.jpg','-Laptop-Question.xjpg').replace('-Laptop-Question.jpg','-Android-GetToQuestion.xjpg').replace('.x','.');        \"    \/><\/a><p class=\"wp-caption-text\">Android App Learning Programming UX Primer Tutorial<\/p><\/div>\n<p>The term <a target=_blank href='http:\/\/en.wikipedia.org\/wiki\/User_experience' title='User experience (UX) information from Wikipedia ... thanks'>&#8220;user experience&#8221;<\/a> (or UX &#8230; you now have UX Experts) refers to the ease with which users use your web or mobile or desktop applications.  For me, a list of some of the considerations could include &#8230;<\/p>\n<ul>\n<li>ease of navigation<\/li>\n<li>size of elements that that navigation involves<\/li>\n<li>amount of paring down of functionality relative to screen dimensions &#8230; if any?<\/li>\n<li>user emotions<\/li>\n<li>user behaviour regarding the application<\/li>\n<li>interest<\/li>\n<li>colour<\/li>\n<li>speed of response<\/li>\n<li>robustness of functionality<\/li>\n<li>security considerations<\/li>\n<\/ul>\n<p> &#8230; you could probably go on and on, but, today, taking our Android App called &#8220;Learning Programming&#8221; as an example wanted to talk a bit about the relationships of those first three points above.<\/p>\n<p>To me, &#8220;paring down of functionality&#8221; for smaller screen sizes sounds like a bit of a &#8220;cop-out&#8221;, so we try not to do that, if possible.  This has meant that the &#8220;Learning Programming&#8221; Android App has been a challenging project, with its design, but have been giving it a bit of thought and have made some &#8220;UX&#8221; improvements recently.  And do you know what?   The two changes, designed to only change mobile device usage, involved the enlarging of elements, not the shrinking &#8230; pretty counter-intuitive, wouldn&#8217;t you say?<\/p>\n<p>Think perhaps in the first three points of above, for mobile use, if we stick by our principle of &#8220;not paring down any functionality for smaller screen sizes&#8221;, an overarching &#8220;UX&#8221; principle is more the question &#8230;<\/p>\n<blockquote>\n<p>For the usual application functionality flow are the navigational elements required emphasised so that they are the prominent and obvious features?<\/p>\n<\/blockquote>\n<p> &#8230; and for the &#8220;Learning Programming&#8221; <a target=_blank title='Google Play Learning Program Android App' href='https:\/\/play.google.com\/store\/apps\/details?id=com.rjmprogramming.learning_programming'>Android App<\/a> we have, with this view in mind &#8230;<\/p>\n<ul>\n<li>for mobile platforms only, make the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Android\/LP-Android-GetToQuestion.jpg\" title='Making question marks bigger on mobile devices only'>question marks<\/a> bigger<\/li>\n<li>for mobile platforms only, make the answer <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Android\/LP-Android-Question.jpg\" title='Making answer labels bigger on mobile devices only'>labels<\/a> bigger<\/li>\n<\/ul>\n<p> &#8230; which, to me, creates a much better app &#8230; and reminds me, that another way to think of this is to ask the question &#8230;<\/p>\n<blockquote>\n<p>For the usual application functionality flow, for mobile devices, do we need to (use the) &#8220;stretch&#8221; or &#8220;pinch&#8221; (gestures on) the screen to see what&#8217;s going on?<\/p>\n<\/blockquote>\n<p> &#8230; and we hope the answer is &#8220;no&#8221; &#8230; or noooooooooooooooooo &#8230; or perhaps nooooooooooooo way &#8230; and yet, you want people to reach those more obscure parts of the (mobile) functionality should they choose to venture there &#8230; that is where allowing the &#8220;stretch&#8221; or &#8220;pinch&#8221; (or scaling) gesture to work (big time), makes for the best of both worlds, methinks &#8230; via the use of a meta tag viewport like &#8230;<\/p>\n<p><code><br \/>\n&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1, minimum-scale=0.25, maximum-scale=8, user-scalable=yes\" \/&gt;<br \/>\n<\/code><\/p>\n<p>Software code wise the changes to do this were in PHP to return a string that isn&#8217;t &#8220;&#8221; (ie. nothing) when the device is a mobile one &#8230; pretty specific to requirements (and thanks to this <a target=_blank href='http:\/\/stackoverflow.com\/questions\/6524301\/detect-mobile-browser' title='Useful link'>webpage<\/a>), but this looks like code snippets as below &#8230;<\/p>\n<p><code><br \/>\n&lt;?php<br \/>\nfunction maybetwo() {   \/\/ regarding size of question mark<br \/>\n  if (preg_match(\"\/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up.browser|up.link|webos|wos)\/i\", $_SERVER[\"HTTP_USER_AGENT\"])) {  \/\/ thanks to http:\/\/stackoverflow.com\/questions\/6524301\/detect-mobile-browser<br \/>\n    return '4';<br \/>\n  }<br \/>\n  return '';<br \/>\n}<br \/>\n?&gt;<br \/>\n<\/code><\/p>\n<p><code><br \/>\n&lt;?php<br \/>\nfunction maybeone() {    \/\/ regarding size of answer labels<br \/>\n  if (preg_match(\"\/(android|avantgo|blackberry|bolt|boost|cricket|docomo|fone|hiptop|mini|mobi|palm|phone|pie|tablet|up.browser|up.link|webos|wos)\/i\", $_SERVER[\"HTTP_USER_AGENT\"])) {   \/\/ thanks to http:\/\/stackoverflow.com\/questions\/6524301\/detect-mobile-browser<br \/>\n    return '1';<br \/>\n  }<br \/>\n  return '';<br \/>\n}<br \/>\n?&gt;<br \/>\n<\/code><\/p>\n<p>We hope you get some ideas out of today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Android\/LP-Android-Question.jpg\" title='Click picture'>tutorial<\/a> showing usage on a MacBook Pro laptop, an iPad, and an Android mobile phone &#8230; so we&#8217;ll sign off for now &#8230; and hope to see you again soon.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d13308' onclick='var dv=document.getElementById(\"d13308\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=user-experience\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d13308' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The term &#8220;user experience&#8221; (or UX &#8230; you now have UX Experts) refers to the ease with which users use your web or mobile or desktop applications. For me, a list of some of the considerations could include &#8230; ease &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/android-app-learning-programming-ux-primer-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,12,37],"tags":[96,485,630,734,776,777,795,797,799,932,997,1319,1350,1356,1373,1400,1402],"class_list":["post-13480","post","type-post","status-publish","format-standard","hentry","category-android","category-elearning","category-tutorials","tag-application","tag-gesture","tag-ipad","tag-macbook-pro","tag-meta","tag-meta-tag","tag-mobile","tag-mobile-application","tag-mobile-phone","tag-php","tag-programming","tag-tutorial","tag-user-experience","tag-ux","tag-viewport","tag-web","tag-web-application"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/13480"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=13480"}],"version-history":[{"count":0,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/13480\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=13480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=13480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=13480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}