Thursday, November 13, 2014

Making an App Studio app better

I've recently released an app for the UK based charity Toilet Twinning. I wholeheartedly encourage you to support the work they do and twin your toilet now. This post is based on lessons from building that app.

The Toilet Twinning apps were built using App Studio. In the past I've been very critical of apps built this way as most of the ones I've seen have been of what I'll politely call a "less than perfect" quality. Evaluated against some of the older store requirements (that were originally intended to improve app quality but have since been removed to simplify the submission process) many of these apps would not get into the store.

Here's a list of things I did to improve the apps. Hopefully, if you're building an app with App Studio, you'll be able to apply some of these changes to your apps and improve them too.
  • I originally included an Instagram section in the app to show related images. Unfortunately the search functionality stopped working shortly so I removed the related pages and hub sections.
  • The Windows Phone app did not include scaled versions of the images in the assets folder. So I added them to get a better visual experience on phones with larger screens.

  • In the Windows app it didn't include a placeholder for the 310x310 logo image. But it did include them for all other logo images. So I added it and was therefore able to support all tile sizes.
  • I had to remove the, pointless, default tile updating behaviour which just replaces the tile image with the one from Shared/Assets/DataImages/FlipSquareTile.jpg. All this did was replace one image with another. Always the same one and with no extra information. Updating a live tile with new information as it becomes available can be a great thing to do. But this didn't do that. I've made a note below that adding a background agent to have some useful, new, information added to the live tile would be a great future enhancement to the app.
  • Added a placeholder for images in the list while they are loading or to be displayed if there is an item without an image.
  • Replaced the trivial default caching behaviour. What good is a caching data provider that when it tries to refresh and there's no network connection it deletes the data it does have and so shows nothing? Or a cache that only keeps data for 2 hours even if it is updated much less frequently. I replaced the caching behaviour with something smarter. It now keeps older data for much longer by default. It will always show data if it has some, even if it's not able to load any new data. 
  • I've also simplified the logic around attempting to load data. Always loading data every time that the user navigates back to the main page seems like overkill. Open app > Load data > tap on item > tap back > reload all data > tap on item > tap back > reload all data (again) > tap on item > tap back > reload all data (yet again). It seems a bit unnecessary. Loading only when it's likely to have changed seems much more sensible. I opted to do this only when the user returns to the app. OnNavigatedTo in MainPage now contains this:
    await MainViewModel.LoadDataAsync(e.NavigationMode != NavigationMode.Back);
  • Thinking about offline support. I added an indicator when there is no network connection available. After all, if there's a good reason why the app can't load any new data it makes sense to let the user know.
  • On each of the hub sections I moved the progress bar used to indicate network activity/loading so that they appear above the items, not behind them.

  • The default formatting for the blog template that I chose was poorly designed such that the right edge of text was clipped. See in the green rectangle below.
In that I want the text being displayed to actually be readable by the person using this app. I fixed this issue with widths and margins. I also adjusted the spacing and margins so that an extra line of text is visible. It now looks like this:

  • When looking at an individual item from the blog / RSS feed there were other improvements to be made. The original output from the tool looked like this:
But with a few changes was made to look like this:
There are 5 changes here: made the system tray transparent; removed the unnecessary and not fully visible app logo and title; reduced page margins; reduced paragraph spacing; and increased the size of the image. There's more that can still be done with RSS content formatting but this is a definite improvement
  • There was also a subtle issue I fixed that is experienced when swiping between stories/items. If there are multiple items that are long enough to be scrolled and one is scrolled down. Then if you swipe to the side 4 times you will find that you get to an item that is not at the top but already partially scrolled. Almost certainly not what you want but easy to fix. Every time the selected item in the FlipView is changed, walk the visual tree to find the ScrollViewer and have it scroll back to the top (VerticalOffset = 0).
  • On the Facebook hub section there was again more work to be done to tidy up the margins, spacing and text formatting and clipping of text on the right and bottom edges. This is not ideal:
It also doesn't make sense to trim the title at the expense of body detail content. This looks much better:

  • For the Facebook details page, similar changes were made as for the blog details page.
  • On the YouTube hub section there was again a need for a bit of finessing of the basic layout but there were two bigger issues. Firstly, even though a large image is used in the item template the image displayed is actually very small and scaled up leading to a blurry image being shown.
Fortunately the details that the YouTube API returns include a variety of images at different sizes. With this knowledge I changed the code so that it uses the largest thumbnail image available, not just the first in the list. This lead to no blurring in the image (click to view full size)

  • The second big issue I had was that the search for my desired search term "Toilet Twinning" was returning some completely unrelated item. After a little exploration I realised that this was because the search term wasn't being used in quotes. This meant that the server was also returning videos that match on the individual words also. As I don't want to show general videos about twinning (or toilets), it's necessary to make sure the term is encoded in quotes. Unfortunately the web site doesn't allow this.
As it seems that encoding values entered in a URL is too much for I manually edited YoutubeDataSource so it now includes
private const string _url = @"https://gdata.youtube.com/feeds/api/videos?q=%22toilet%20twinning%22&orderby=published&start-index=1&max-results=20&safeSearch=strict&format=5&v=2";
  • Again the YouTube details page needed some refining. The strangest being the removal of the hard coded string "Detail" at the top of the page. I can only assume that this was there as the result of an error in App Studio.

  • I added another hub section to show the tweets from the @toilettwinning account. For details of this see the link at the bottom of this post.
  • The final hub section originally contained HTML content. I replaced this with the direct XAML equivalent as the HTML version prevented horizontal swipes from navigating the hub control. This could be frustrating for users as they swipe through the hub but find the the gesture they're doing suddenly stops working.
  • Many of the above changes shown in the Phone app were also made in the Windows one.
  • Additionally, in the Windows app I removed space reserved for back button on the main page - as the back button will never be shown there
  • On the Facebook detail page in the Phone version, it originally used a purple colour for hyperlinks. This was sometimes very hard to read on the background so I changed it to be white like in the Phone version.


That's not the end though. There are still other things that can be done to improve the app further.
Here are some ideas:

  • Default data for when first run and a better first run experience
  • Add a FAQs page directly within the app to explain more about the charity without needing to redirect to the website
  • Add a background agent to update the tile so new content can be seen without having to open the app
  • Add image caching so that images can be viewed with the other offline content.
  • Improve the HTML parsing to improve the display of content
  • Improve the display of images to better scale and stretch images with consistency but still coping with the variety of images sizes to display.
  • And probably many more things. Got any suggestions?


Hopefully I'll be able to add at least some of these to the app soon.


If you're building an app with App Studio and wish to add a Twitter feed to it, I have another blog post that explains how to do this.


10 comments:

  1. Replica Handbags: Amount & Superior Consciousness!Our handmade Replica accoutrements are absolute artist delights consummate accessories for gucci replica the appearance conscious,at a atom of the amount of an aboriginal artist handbag.You could buy a Versace replica backpack for anniversary day of the anniversary for the amount of one aboriginal Versace handbag.Afar from you and Beubag.com,no one abroad will apperceive that your Versace replica backpack is louis vuitton replica a replica and not the actual original!Most able who abrasion these Rolex replica watches accept accepted that they accept begin a new angel of themselves afterwards they accept started cutting these Rolex replica watches!So what are you cat-and-mouse for? Get one of the endless models of cartier replica the Rolex replica watches and see your activity change immediately.Not alone will the girls at the affair battery all their amore on you,you can be blow assured that even your bang-up will pay appropriate absorption at you.Rolex replica watches accomplish these wonders and lots more.Swiss replica watches are tag heuer replica acclaimed all over their apple for their body and accomplish and you can acquisition a lot of celebrities cutting them and assuming off that they are anyone special.They wish to get the best out of activity for the least.Swiss replica watches provides them with an befalling to appearance off replica watches uk what is declared to be the best for the minimum cost.

    ReplyDelete
  2. The second thing is, be sure and send an Replica Watches UK age-send prior to putting in an order need to if the desired watch seems the same as the Replica Watches within the pictures. Convey to the company you will straight away contact your credit-based card business you get stolen if you achieve what that is different from this timpiece within the Replica Watches UK pictures. Also, you need to observe how expert the company was in answering and adjusting your age-send. Whenever they tend not to react to your age-send in the future, then certainly not have business dealings with this company. Forever use a credit card with 100Pct deception security. It's also possible to choose to cover your watch by money shipping in case you are made it possible for to see you buy the Replica Watches car and then make a decision whether or not youare going to pay or perhaps not. Under no circumstances purchase Replica Watches uk below wholesale that won't offer you a money back guarantee.

    ReplyDelete
  3. I originally included an Instagram section in the app to show related images. Unfortunately the search functionality stopped working shortly so I removed the related pages and hub sections.trap beats for sale

    ReplyDelete
  4. Anonymous2:36 pm

    We electronically detects water leaks and cracking and without using the best modern methods for the detection of water Tcherbat Vtnhn better detect water leaks in Riyadh Company
    شركة كشف تسربات المياه بالرياض


    We ostensible acts of ceramic tiles and parquet and using the best quality materials Vennhn best ostensible tile company in Riyadh
    شركة جلى بلاط بالرياض
    Clogging sewage streams and sewers is a serious problem threatening human health and lead to the spread of many serious diseases. If you experience Ansd for pipes or shafts can be used in the best شركة تسليك مجارى بالرياض
    for wiring sewage, septic tanks suction to get rid of non-grainy smells

    ReplyDelete
  5. Anonymous2:38 pm

    فلا تترد عميلنا العزيز بالاتصال بنا لتحصل على افضل خدمة تنظيف متوفرة في الدمام .
    كذلك تقدم ركن اليمامة العديد من الخدمات لخدمة اهل المنطقة الشرقية بالمملكة
    شركة كشف تسربات المياه بالرياض
    نستخدم افضل المواد المنظفة المخصصة للكنب والسجاد والستائر للحفاظ عليها من البهتان او تلف انسجتها ونغطى كافة مدن المنطقة الشرقية و كافة المملكة فركن نجد يتوافر بها قسم لكل منطقة فاتصل بنا عميلنا نصلك اينما كنت فنحن افضل شركة تنظيف منازل بالظهران وافضل شركة تنظيف منازل بالجبيل وافضل شركة تنظيف منازل بالقطيف وافضل شركة تنظيف منازل بسيهات وافضل شركة تنظيف منازل برأس تنورة
    وافضل شركة تنظيف منازل بالاحساء

    بالاضافة الى خدماتنا الاخرى المتنوعة كمحافحة الحشرات ورش المبيدات فركن اليمامة افضل شركة تنظيف منازل بالدمام وافضل شركة تنظيف كنب بالدمام وافضل
    شركة تنظيف شقق بالدمام وافضل شركة تنظيف خزانات بالدمام وافضل شركة تنظيف مجالس بالدمام وافضل
    شركة مكافحة حشرات بالدمام
    شركة تنظيف واجهات حجر بالدمام

    ReplyDelete
  6. Anonymous2:39 pm

    ركن اليمامة افضل شركة تنظيف شقق بالخرج تقدم العديد من خدمات التنظيف ومافحة الحشرات بالخرج
    شركة ركن اليمامة لأعمال شركة تنظيف خزانات بالخرج
    والتي تقدم تنظيف خزانات المياه بالخرج بافضل معدات السحب والتعقيم والتطهير حيث نعطي تنظيف الخزانات اهيمة خاصة حيث انة اذا كان الامر يتعلق بصحة الانسان وخصوصا اذا كانت المياة التى يستخدمها الانسان فى حياتة اليومية فلابد من الانتباة الشديد الى نظافة هذة المياة
    لا تقلق معنا عميلنا العزيز من اي حشرات منزلية نحن نضمن لكم عملائنا الاعزاء ابادة تامة لكافة حشرات المنزل مع الضمان فجميع فنيي الشركة مدربين ويعرفون جيدا ما المطلوب فركن اليمامة افضل شركة رش مبيدات بالخرج وافضل شركة مكافحة حشرات بالخرج
    ونتمتع بالمهارة العاليه في تنظيف المنازل والبيوت والشقق والقصور فركن اليمامة شركة تنظيف منازل بالخرج تستخدم اجود المنظفات والالات التنظيف مثل المكانس الكهربية و الات التنظيف بالبخار

    ReplyDelete
  7. chicago bears, http://www.chicagobearsjerseys.us/
    nobis outlet, http://www.wellensteyn.com.co/
    tory burch shoes, http://www.toryburchoutletonline.in.net/
    replica watches, http://www.replicawatchesforsale.us.com/
    ed hardy shoes,ed hardy,ed hardy clothing,ed hardy shoes for women,ed hardy clothing for men,ed hardy perfume,ed hardy watches
    christian louboutin, http://www.scarpelouboutin.it/
    ugg outlet store, http://www.uggboots-outlet.co.uk/
    nike huarache, http://www.nike-airhuarache.co.uk/
    nike air max, http://www.airmax2015.in.net/
    ray ban, http://www.occhiali-rayban.it/
    louis vuitton bags on sale, http://www.louisvuittonbag.us.com/
    nike air max,nike roshe,nike huarache
    canada goose outlet, http://www.canadagoose-coats.us.com/
    hermes belt for men, http://www.hermesbelts.us/
    north face jackets, http://www.thenorthfaceclearances.us.com/
    ray ban sunglasses,ray ban sunglasses outlet,ray ban,rayban,ray bans,ray ban outlet,ray-ban,raybans,ray ban wayfarer,ray-ban sunglasses,raybans.com,rayban sunglasses,cheap ray ban
    cheap oakley sunglasses, http://www.oakleysunglassesdiscount.us.com/
    woolrich clothing, http://www.canadagoosejackets.in.net/
    kkkk10 13

    ReplyDelete