Mobile technologies have been evolving for several years across three main platforms, Android, iOS and Windows. The research includes designing and prototyping of an innovative commercially viable planner application for use on mobile devices, evaluating a range of modern tools, technologies and practises used during implementation.
Xamarin, Mobile, Application, Android, iOS, Cloud, User Interface (UI)
Weddings are one of the most important times in a person’s life and keeping all the information in one place can be challenging. The idea of a planner is not a new concept. However, Don’t Panic Wedding Planner (DPWP) explores technologies to deliver and implement a collaborative event planning experience. These include mobile platforms, development environments, cloud storage systems and authentication APIs for user management.
Solution design and User Interface (UI) are evaluated against academic and industry standards to provide insights and development opportunities.
3 Related Work
Several event and specific wedding planners exist within the current market offerings, each providing a wide range of functionality and user experience. Using public feedback available online for these applications, it is identifiable that user collaboration and social interaction were key issues not addressed in current solutions (LadyMary, n.d.) (Wepala, n.d.) (WeddingWire, n.d.).
4 Development Resources
Four key development environments were considered for use on the project. Google’s Android Studio, Apples XCode, Microsoft Visual Studio and Visual Studio with Xamarin Forms.
The language selection varies across platforms, a comparison is made in figure 1.
|iOS XCode||iOS||Swift / Compound C|
|VS + Xamarin||X-Platform||C#|
Figure 1 – IDE Comparison
The choice to use Visual Studio, Xamarin and C# was made based on Market research (Statista, n.d.) showing that Android and iOS have a high share of users coupled with previous developer experience of both the C# language and Visual Studio environment, enabling cross-platform development targeting the largest audience.
4.1 Xamarin Features
With code written in C# and access to Visual Studio’s powerful debugger, Xamarin provides three flavours; Xamarin Forms, Xamarin Android and Xamarin iOS. This project has focused on the cross-platform Xamarin Forms.
Xamarin Forms provides access to global features across platforms, Android, iOS and Windows Mobile and Windows App. Attempting to recreate native platform UI functionality with a write once code approach. However, more specific functionality requires code targeted directly at the platform in question.
4.1.1 NuGet Plugin Support
Provided within the VS / Xamarin package are large numbers of plugins available for implementing common tasks such as Google authentication or advertising functionality.
These libraries allow for fast feature integration, but in research into code vulnerabilities by Shin, et al. (2011) show that if the developer network is unknown or large with high code churn, then there are increased security risks this is backed in discussion from White (2011) by noting that code integrity should be considered coming from an unverified third party as NuGet provides no way to authenticate the source.
Due to these factors, plugins have been used sparingly, supplied directly from Xamarin or Google being trusted sources.
5 Application Design
DPWP is designed to be collaboratively centric with a range of features and the aim of providing a unique solution. Research into User Experience (UX) by McCarthy, et al. (2006) suggests an enchanting experience; engaging thoughts and feelings of a user to entice them to return. Although, UX can be entirely subjective Microsoft (2017) suggests that accessibility and usability can play a big part in a person’s perceived experience.
To do this the application must be able to individually identify users and have access to a central data source enabling user management and event sharing.
Basic application functionality provides users with the following;
- Editable event data and budget
- Custom budget items
- Simple To-Do list
- Guest list
- Sharing of event with others
- Setting permissions of shared event
These features were chosen as being representative of existing market solutions’ features whilst adding collaboration at the core.
Additional features considered for inclusion but not added in this development run include;
- Table Planner
- Catering Planner
- Event Inspiration
With plans for event inspiration to return relevant targeted results from online shopping, APIs like Amazon’s (2013) Product Advertising API, further enhancing the overall UX and application engagement.
5.2 Designs Concepts
Mock-up designs were created using both Balsamiq Mocups (n.d.), figure 1 and Microsoft PowerPoint to provide an outline for development.
Figure 2 – Balsamiq Mock Up
Balsamiq provides tools tailored for quick interactive mobile designs but comes with added complexity. Whereas Microsoft PowerPoint not specifically designed for this task competes favourably in effectiveness for very basic designs.
If the application being envisaged was more comprehensive, then Balsamiq would offer professionalism and storyboarding with basic device emulated functionality.
5.3 User Registration
A custom registration system was considered alongside using third party logins such as Google or Facebook. However, if a custom login was implemented secure data transmission and storage would also be required. By utilising a third party, password credential storage is not necessary whilst still providing a recognised and accessible login method.
Google’s API (n.d.) was chosen for use within the DPWP as Android users will already be registered to access Google Play services.
Plans for similar functionality from other providers, Facebook and Microsoft for example, are to be included in the future providing access to a wider audience.
5.4 Data Storage
Given that the expected data generated from DPWP would be predefined and homogeneous in nature, a relational database was decided upon to support data storage.
Several database solutions were considered such as a private MySQL or PostgreSQL database which would probably have sufficed. However, the final solution utilises the Microsoft Azure cloud service providing high levels of availability and third party service management in a scalable environment offering flexible capacity (Microsoft, n.d.).
Azure cloud service has the added benefit of including Xamarin quick start options for integrating SQL databases using the Azure web API. Additionally, supporting offline sync for when users are out of Wi-Fi or signal range, but not currently deployed within DPWP (Microsoft, n.d.).
One drawback from the Azure technologies is cost. As it currently only provides the service free of charge up to 500,000 API calls per month and or 500 active devices. One or both values are likely to be exceeded upon public application release, moving to a chargeable tier (Microsoft, 2017). This further emphasises the requirement for commercial viability.
5.5 Work Methodologies
As lack of previous experience working with Xamarin was a major factor. A waterfall methodology would not have been the most desirable approach, with Dawson (2015, p. 129) suggesting that specifications and requirements must be fully understood before outset. Although, work plans set out in stages of feature development remained logical, an agile approach was set out on top. This allows for quick feature development with code changes made over several iterations based upon learnings made during previous runs (Sommerville, 2011), figure 3 outlines this concept.
Figure 3 – Design Methodology
Because of the agile processes performed it was quickly identified that developing and debugging across three platforms and building the application to the desired specification would be difficult in the time frame allotted. Due to this the decision was taken to narrow project scope and focus solely on Android deployment.
6 User Interface
Many challenges present themselves within mobile application development and Nilsson (2009) suggests three main problem categories for mobile UI;
- Utilization of screen space
- Interaction mechanisms
- Design at large
These problems were encountered during development and are expanded on in the following subsections.
6.1 Screen Space
Displaying large groupings of information has been particularly challenging and can be seen within the guests’ functionality, figure 4.
A custom drop down interface was deployed in various areas of the application. The dropdown solution provides a way to present additional information to users but is likely not in-line with user expectations. Currently cluttered and incorrectly spaced, requiring further work and exploration to present this information appropriately.
Figure 4 – Guest List Screen Space Issue
User interactions for input followed design guidelines set forth by Xamarin. Native time and date pickers were used shown in figure 5 and appropriate input keyboards used for the corresponding data types, figure 6. Allowing for more expected, natural user interaction.
Additionally, when waiting on asynchronous database operations users are informed that the application is loading via modal window figure 7, disabling interaction until data is ready to be presented to user, thus making users more patient (Nilsson, 2009, p. 3.6).
Figure 5 – Android Date Picker
Figure 6 – Android Numeric Input
Figure 7 – DPWP Loading Screen
6.3 Design at large
Design stages had defined a custom menu bar which was implemented early within a base page class. Although Xamarin provides many transition methods which were discovered during agile development.
These predefined menu options would offer a better user experience and use less screen space. This can be addressed during further agile design sprints, with the code only needing to be refactored within the base class.
Currently the menu uses a custom transition effect to expand over the main view space. However, the buttons highlighted in figure 8, should be labelled for accessibility. Further compounding screen space issues using this method. (Xamarin, 2016)
Figure 8 – Menu Bar Expanded
6.4 General Accessibility
In conformance with Xamarin’s (2016) accessibly checklist many factors of the application remain outstanding. For instance, supporting large fonts and high contrast. The application attempts to use mainly white background with contrasting text but has no support for alternate sizes (Microsoft, 2017).
Navigation is not fluid, requiring the user to press the back key to navigate home, progressing using only the home panels. Once full menu implementation is completed this should be address. Before this takes place, a visual navigation tree should be designed to give a structured overview of user flow, providing increased usability (Microsoft, 2017) (Android Developers, n.d.).
The application as it stands is suitable only for the UK market and does not support alternative currencies, languages or layouts to accommodate right-to-left text as suggested by Xamarin (2016).
Additionally, all text is hardcoded within the application. Xamarin (2016) details methods to add strings as resources defined within XML RESX files. Though, once the base file is completed the additional use of translators returning language specific files is required. Xamarin also recommends implementing localisation during early design stages which had not been accounted for.
Whilst many applications are available in the market for free they will often display advertising in exchange for the price point and offer a chargeable version without advertising or additional functionality. Several advertising solutions were investigated; Google AdMob, Facebook, Microsoft.
Although Asimakopoulos et al (2013) suggest that mobile advertising can detract from the overall UX steps can be taken to offset this; one being making the advertising relevant to the user.
Google AdMob, figure 9, was chosen based upon Googles reputation, the ability to target advertising directly using keywords and the capability to implement cross platform, albeit requiring platform specific code.
Figure 9 – Google Ad-Mob (Offline Testing)
The application identifies versions from a variable within the settings allowing for free and chargeable options with a simple product upgrade process.
It’s clear from the results produced that Xamarin is an excellent choice for developers looking to quickly design and implement applications with few device specific capabilities or underlying API calls, delivering cross platform wrappers to provide native functionality.
Unfortunately, if additions such as ‘find my nearest’ using maps and GPS were to be included, or ‘photo sharing’ using the camera, platform specific code would need to be written and if this was to occur often during feature development, Xamarin Forms may not be the best option. Instead opting for targeted solutions like Android Studio or XCode as alternatives.
In its current state the user interface requires steady research and development and because it does not make full use of the Xamarin libraries detracts from the overall user experience and application quality. Yet, for proof of concept the application delivers in specified design features, whilst utilising modern tools, technologies and practices to achieve a working demonstrable prototype.
Research supported by the University of Suffolk. Thanks for guidance and support go to David Gee & Elaine Eagles at the University of Suffolk.
Amazon, (2013) Product Advertising API.
Available at: http://docs.aws.amazon.com/AWSECommerceService/latest/DG/Welcome.html
(Accessed: 18 November 2017).
Android Developers, (n.d) Best Practices for Interaction and Engagement.
Available at: https://developer.android.com/training/best-ux.html
(Accessed: February 14 2017).
Asimakopoulos , S., Spiller, F., Boretos, G. & Liu, Z., (2013) Designing mobile advertising: User Experience factors for enhancing user adoption. Mobile Computing and Communications Review, 17(3), pp. 3-4.
Balsamiq, (n.d) Balsamiq.
Available at: https://balsamiq.com/
(Accessed: 22 December 2016).
Dawson, C., (2015) Projects in Comuting and Information Systems. 3rd ed. Edinburgh: Pearson Education.
Google, (n.d) Google Sign-In.
Available at: https://developers.google.com/identity/
(Accessed: 19 November 2017).
LadyMary, (n.d) LadyMary Wedding Planner.
Available at: https://play.google.com/store/apps/details?id=com.fotavo.todolist.ladymarry
(Accessed: 16 October 2016).
McCarthy, J., Wright, P., Wallace, J. & Dearden, A., (2006) The experience of enchantment in human–computer interaction. Personal and Ubiquitous Computing, 10(6), pp. 369-378.
Microsoft, (2017) Mobile Services Pricing.
Available at: https://azure.microsoft.com/en-gb/pricing/details/mobile-services/
(Accessed: 06 March 2017).
Microsoft, (2017) Navigation design basics for UWP apps.
Available at: https://docs.microsoft.com/en-us/windows/uwp/layout/navigation-basics
(Accessed: 14 Feburary 2017).
Microsoft, (2017) Usability for UWP apps.
Available at: https://docs.microsoft.com/en-us/windows/uwp/usability/index
(Accessed: 20 Feburary 2017).
Microsoft, (n.d) Microsoft Azure Mobile Apps.
Available at: https://azure.microsoft.com/en-gb/services/app-service/mobile/
(Accessed: 10 December 2017).
Nilsson, E. G., (2009) Design patterns for user interface for mobile applications. Advances in Engineering Software, 40(12), pp. 1318-1328.
Shin, Y., Meneely, L. & Osborne, J. A., (2011) Evaluating Complexity, Code Churn, and Developer Activity Metrics as Indicators of Software Vulnerabilities. IEEE Transactions on Software Engineering, 37(6), pp. 772-787.
Sommerville, (2011) Software Engineering 9. Boston: Pearson Education.
Statista, (n.d) Share of smartphone operating systems sales in Great Britain from 2014 to 2016.
Available at: https://www.statista.com/statistics/510643/mobile-os-sales-share-great-britain/
(Accessed: 5 November 2016).
WeddingWire, n.d. Wedding Planner – WeddingWire.
Available at: https://play.google.com/store/apps/details?id=com.weddingwire.user
(Accessed: 16 October 2016).
Wepala, (n.d) Our Wedding Planner.
Available at: https://play.google.com/store/apps/details?id=com.wepala.weddingplan
(Accessed: 16 October 2016).
White, B., (2011). Is there any way to use Nuget securely?.
Available at: http://security.stackexchange.com/questions/7845/is-there-any-way-to-use-nuget-securely
(Accessed: 04 February 2017).
Xamarin, (2016) Accessibility.
Available at: https://developer.xamarin.com/guides/cross-platform/advanced/accessibility/
(Accessed: 01 March 2017).
Xamarin, (2016) Localizing Xamarin.Forms Apps with RESX Resource Files.
Available at: https://developer.xamarin.com/guides/xamarin-forms/advanced/localization/
(Accessed: 05 March 2017).