Tweak the Tweet: Mobile Prototyping

HCID 521 Prototyping Studio | Week 6 | Assignment

At this weeks’ assignment, we were assigned to make a prototype from an Android application project “Tweak the Tweet”. Since the detailed specs were already given, Tar, Irene, and I decided to follow the specs and discover AppInventor as a prototype tool, which was introduced in class at week 6.

Since this is more about following-spec assignment, and we were not asked to test the prototype, for us it was more about a basic understanding in developing/designing an mobile application in a developer’s perspective. AppInventor is indeed a great tool for beginners to take a first glimpse of how a mobile application is programmed. However, due to its limited flexibility of actual programming, somehow I found it hard to develop a fully functional and integrated app as I do in average developing environment (for native app or mobile phone web).

For example, I found it hard to interact with Google Maps API in AppInventor, which can easily be done in native coding environment. The only way that AppInventor allows to communicate with cross-domain sources is WebViewer, which is basically a built-in browser. I applied some tricks by using JavaScript to built-in a HTML page in the app, and make the page connected to Google Maps. The only way to communicate between the content of WebViewer and the application is the URL and webpage’s title. I applied the URL as input parameter and the page title as output, using JaveScript to parse input parameters and return the output to the application (in this case, GPS or address to search will be the input, and the output will be the address of the location assigned/tapped by user on the map). Instead of our team, I also provided this trick to another team.

One good thing about AppInventor is the fully integrated Twitter widget. This allows us to shorten the time for embedding Twitter API in the application. I can imagine if this is not a built-in function in AppInventor, it will be much harder to realize the Twitter part of functionalities thru WebViewer.

A tough thing we discovered in both AppInverter and native code developing for Android devices is the various resolution standard of different devices. This can be great for user if an application is fully supporting every single device that runs Android, and users can choose their own resolution/using experience based on their own need. However, it takes a lot of time for developer and designer to do so. It is relatively hard to design a high-quality application with consistent user experience with all these different resolution ratios and specs. iOS or Windows Phone application developers/designers will find this much more easier.

I am always more than willing to discover new tools for prototyping, and I do appreciate the basic concept of AppInventor: lowering the barriers of mobile phone programming. However, if I am assigned a project like this in the future, I will definitely choose to prototype in HTML/CSS/JaveScript, which would only take me only few hours to do so. Axure is even a better choice if it could be really lo-fi.