mobile_applications

AppFurnace is a visual, easy to use platform that allows anyone to build an app or idea. Similarly to HotGlue you don't have to know how to code. You can create simple apps and mimic what code could do. This is useful to create a mock-up before deploying further investment into it's development or deployment. I'll be exploring this concept further during my interaction with AppFurnace.

Using AppFurnace for the first time felt natural as it uses the drag and drop approach to position elements on a device. During my first use I decided to utilize the Location functions available within the platform.

UWE Treasure Hunt
I created a simple Treasure Hunt app which uses your location and provides a chain of hints you have to follow to find the 'treasure'. To execute this I simply define the area within AppFurnace under the 'Location' tab. Here you can define a page or function to run when your location matches that of the user's device.

So for instance in the example of this app when the user reaches the gym the riddle will appear (brought up on a separate page), the user will then work out where they need to go next and continue this until the end.

I also ran two functions that popup, one if the user leaves Frenchay Campus and the other when the treasure hunt is complete. Take a look at the javascript I used to create this here:

There are two disadvantages I have already found creating this simple app, although I am happy with it's outcome. Firstly, the locations I defined for the clues to the game aren't defined in any order. The user could accidentally walk through the last location and a popup would appear stating that the game is complete. This is the biggest disadvantage as it creates confusion. There must be a more effective way to achieve an absolute order, that only triggers the next clue if the user is in the correct location within that defined order.

The second problem I encountered may be due to my error, on page 4 I wanted to create a button which runs a video, but the video is not displayed on that page. I tried to convey the YouTube video by launching the web page in a browser window but the app wouldn't allow this (see code above). I think I should embed the video into the app as this will likely work, I would have to upload the file to the app. This consequently could slow down it's performance, the other option is to store it on a web server and using code retrieve it from there much like an HTML iframe would.

Building MyRoute App
The idea for this app has come from creating the Treasure Hunt app whilst playing around with the Location function. I like the idea of your screen changing depending on your specific location. This gave me the initial idea for a Tourist Guide app that shows you multiple routes to follow in your current city, from this you would select a route. As you walk, pop-ups would give you facts and interesting information about the areas or buildings you walk past. This of course doesn't have to be exclusive to Bristol, but could be used nation-wide and even globally.

This idea developed further, to become a more social and enriched app. Why should it only be for tourists? This question spurred on my initial plan and notes, as seen below.

I first created a list of possible users, i.e a target audience. From here I attempt to find the clearest form of navigation by asking what would the user want to know and how would they want to know. The home screen needed to narrow down the search before the user could begin to find a route. The problem was that I didn't want to clutter the first screen the user experiences. I believe you should never be more than a click away from what you need, so essentially the navigation would need to strip back to the least possible steps.

1 Developing The Home Screen - creating the drop-down

One idea was for the app to launch the correct city map by taking in the location of the device. The problem with this is that it's not a realistic process. The user may want to plan a future route in a completely different location. Also it's highly unlikely all cities would be available if this app where to go nation-wide or indeed globally.

So I penned in the idea of a simple drop-down select box. Of course the search box field would have been a valid utility, but I avoided this as many searches would be rejected if they weren't listed in the app. This would create a negative experience for the user, which I certainly want to avoid.
Using the drop-down, the selection would therefore run and the user could search for routes in that city, thus narrowing down the navigation. Further drop-downs were considered such as 'type of route', for example 'Historic' or 'Cycling Routes' as possible options. Also the ability to select walking or cycling routes specifically to tailor both audiences. However this just added too many options to the home screen, so I reverted to one drop-down to select a city. Below is the flow diagram for navigation that I came up with.

The drop-down function is not something that comes 'out the box' as an optional widget with AppFurnace. I required javascript to replicate the process of a drop-down select box. This snippet of code I sourced from AppFurnace's own forum, here people discuss possible ideas and ask how to produce new elements in the platform. I edited the code to suit my use and here it is:

What this is doing is making a hidden VScrollArea (Vertical Scroll Area) appear when the 'select box' is tapped, this therefore shows the list of options. Then, when a user taps the option, it will update the variable, as well as the select box text - and hide the options again.

For this to work I had to begin by creating a button with a text value of "Select an option". Change it's tappedFunction to "openOptions" and codename to "ui.selectButton". Then add a VScrollArea with the codename of "ui.selectOptions" and set it to hidden as default so that it only appears when tappedFunction is true. The 'VScrollArea' is a widget that can be used to make scrollable areas, in this example I'm using the vertical option so it appears as a drop-down menu by scrolling up and down.

I add the menu options to the VScrollArea, as buttons in a vertical list, this took a bit of time to line up in the scrollable area. For each option that you want to appear (e.g. "Yes" and "No") or ("Bristol" and "other city"). For each of these, a tappedFunction of "selectTo_Yes" - renaming the word after the underscore to whatever your value should be e.g 'Bristol'. This then appears in the box and the option is selected.

As this is only a mockup and that I am limited by my knowledge, the options won't actually run different results. I just used a simple button to go to the Bristol page, this creates the illusion it works for presentation purposes. I would like to know how to get it working properly, I gather this involves more javascript. In particular the if/else rule maybe would apply here.

Home Screen Design

Developing The Navigation
The Navigation needs to flow well through the app, the user needs to get to where he/she needs without any hassle.

Sticky-Footer Navigation - the likes you get on Facebook or Twitter apps.
The concept is that four buttons remain 'sticked' to the foot of the screen
and that menu is always there. This is a popular form of navigation within
social apps.
The four buttons I planned to design were a Home button, a Categories Button,
a Trending (location based) button and a View Favourites button.

This idea reduced the aesthetics of the app and although it would be useful, it's not a necessary one. The options provided in the foot nav would be present through the location home page anyway so there would be no point in repeating what is there. The buttons became redundant, here is the navigation process I sketched:

1. You begin at the home screen where you use the drop-down to select a preferred location.
2. Your taken to that location's home screen, here will list categories and popular routes in the area.
3. Select a category ( which will take you to that categories home page for that location e.g Historic Routes. Or, 'select a popular near you' route.
4. Then your taken to your chosen Route's info page, here you could view the length, time and other information.
5. View Map, you could also click between list view and audio guide.

Back buttons would also be available on each screen.

Whilst planning the processes of MyRoute I realised that it could become a more social and engaging app, as I mentioned at the begining. Why not improve the volume of content by allowing people to upload their own routes? Of course there is the possibility that some of the routes could be nonsense, but a ratings system could be added, based on a number of stars for example. This could be incorporated into the 'trending' element discussed previously, where the more votes you get, the higher your route moves up the rankings in your local area.

The possibilities kept on flowing! Users could log in with Facebook, this is a common practice with many apps on the market, for who hasn't got Facebook? This engagement could allow the user to share routes over Facebook or even find friends that are also using the app.

Therefore for this functionality to succeed a user area would need to be established.

User Area
A unique user account would need to be created where the user can enter a username and password to log-in to the app (could be done through Facebook).

In the user area, account settings will need to be available so users can change their details and turn on/off push notifications. Here they could view their Favourited routes and View/Create their own routes. This would be a personal area within the app. To accomplish these ideas, databases would need to be set up and access to work with Facebook granted.

Below you can press each number to navigate to the area of interest:

2 & 3 - Location Home Screen
This was always planned to be a scrollable area vertically, but whilst investigating ScrollArea widgets, I found I could place further scroll areas inside scroll areas.
For example I could have a specific category, let's take 'Scenic Routes' for instance. Under this heading I could list routes in a horizontal scroll area, which would be inside a VScrollArea acting as the whole screen.

See B an idea I sketched here was to have categories scrolling across, but the rest of the screen scrolling vertically.

Testing this on my iphone4 I found the top bar to be too thin in height, and there wasn't much movement in the page. I increased the height of the top bar and then inserted the two horizontal scroll areas into a vertical scroll area covering the page (up to the top bar - I don't want this to scroll/disappear).

This felt great to use on my mobile as it was interactive and making great use of space. The 'Popular Near You' section could contain uploads created by other users. This needed to be in a text list format, showing the titles of the walks. Why? Well although the 'categories' section will display image links in it's menu created by me, users may not take good quality photos and therefore the route headings are better to display. These are placed into a verticle scroll area so they can be viewed line-by-line.

Take a look at the finished mock-up:

4 - Route Info Page

As you can see in my sketch, the top of the screen would dominate with a map with overlaying buttons. These will give the user options on how to view the route, map, list view or audio guide for example. Under this would be route information about what it is, length and time it takes. At the bottom of the screen it could provide alternative routes you may like that are associated with your current or past choices of routes.

The social buttons are image buttons, when pressed they appear to change colour. But in fact the images change, in Adobe Illustrator I designed these. Below are the designs of both off-click and on-click appearances.

5 - Map

For the purposes of this project and as I mentioned at the beginning of this review, you can mimic what you would like the app to do - even without the knowledge of javascript. I wanted the map to have each step of the route pinned on to the map along with the route highlighted on it. The pins could be interactive when pressed or automatically launch a fact when you are at the locations. With this in mind, to replicate this once again I used Adobe Illustrator to mock this up.

To begin I took a screenshot of the area on Google maps on a large screen. I then traced over the route following the steps of the route I acquired from TravelWest.info. For this map to feel more interactive I placed the image into a HVScrollArea, (Horizontal and Vertical) this allows you to move around the map on your screen. I then numbered each step on the map with the label widget before realising that I needed to use the button widget with a transparent background.

Succeeding this, linking up the steps from the map was next. This was time consuming as I couldn't find a way to anchor the list of steps I had already created. An Anchor link is in HTML, it allows you to jump to a specific location on a page. Instead I had to create a unique page for each step, so I replicated this process 11 times.

As explored with the Treasure Hunt app, location based notifications can help guide and make the process more ludic. I coupled each step with a location so that that step would appear on the screen when yo reach the area designated. For example when you arrive at step 2, step 3 will appear. This could also include a photo guide or fact about the area.
Here is the locative set-up:

The main problem I feel that is an issue with these location based changes are that they could become annoying to the user. The ability to turn this on and off would be useful, this would be implemented in the account area of the app.

(notes)

On step 11 the following javascript function runs when the user arrives in the final location:

This reinforces positivity, 'it’s experienced as a mini-reward in the brain' according to Fortune Magazine 'positive reinforcement to get users hooked'. This is a certainly useful tool to create a higher chance to continue using the app. The article can be read here.

Visual result:

6 - List view

This allows the user to review each step, one after the other. This can prove to be more useful than looking at a map as it gives you clear instructions. Below are the steps placed into a VScrollArea.

For some routes, 'Historic Walks' for instance could contain facts to make your walk more educational and nostalgic.

Here are screen shots of the finished mock up I produced

In summary, I have enjoyed using AppFurnace to make quick and easy applications. But as I have found many of my ideas are big concepts out of my grasp with ability. I feel with this project I could have used my time more effectively, I could have researched areas of code that I wasn't able to create. This would have provided me with further understanding on how to begin to create certain functions. An example would therefore be an if/else rule within the app to run the different options in the drop-down selection box. Again I could have created my own Route around Bristol instead of acquiring an already pre-existing one from TravelWest.info.

I believe I've created a good concept here with MyRoute, there is much more that can be done with it. In reflection I am unsure I chose the correct colour scheme as it reminds me of Healthcare as it's associated as a medical colour pallet. But overall I am pleased with the overall appearance of MyRoute.

< Here is the simple skeleton layout of the home page that I began with. Two buttons, one being the drop down with hidden scroll area and the other button to run the selected option i.e 'Bristol'.

< This is the end result although the wording 'Find Me!' has changed to 'Find Routes!' to make it clearer to the user of it's tappedFunction.
The wording and use of language has been essential. Originally the 'Choose a location' read as 'whare are you?' this caused confusion in user testing.

^ At this point you get a feel for the app, it has a brand name along with a visual image and colour scheme incorporated. My images were sourced from 500px.com and I applied a filter so that the content overlayed remained more important on the screen. The pictures I have selected throughout the app are chosen to encompass the sense of freedom and adventure of travel and exploring.

A user area has been added, this will be discussed later for why this has been implemented. I designed the icon in Adobe Illustrator.

Ideas for each screen

Possible Users/Categories

< Sign-In/UP page

< User area, your username would appear at the top of the screen to make it feel more personal and to show your logged in.

I could add a 'my routes' section to view the routes you've uploaded in the past and how well they're rated.

The user icon will be present in the top right-hand corner of the screen at all times, unless as above, you are already inside the user area.

Account Settings - Here the user can change personal details. Also the ability to turn on and off location based notifications could be an option.

< Here is my first design, the static bar or banner along the top will contain the logo, back button and user area button.

I created two horizontal scroll areas so you can view different categories by sliding the screen, making use of 'hidden space' beyond the view port. Each rectangle will eventually become a picture link.

Buttons for guide options have been moved from overlaying the map. One large button to 'View Map' is clear and is likely what most people want first.

At this point I am pretty happy with my progress and design of the app.

The information needs to be clearer, what the user needs to know must be a priority.

Hours, Miles and Rating of the route is key information so this is made large and bold on the screen for the user to receive a quick overview of the route.

A favourite button and social share buttons to Facebook and Twitter have been included to help promote the app and engage with other people. This creates a more personal experience

App Furnace provides a map widget within the platform, with a choice of street or satellite appearance. Originally I used this and it was useful as I could use the location of the device to centre the map to where you are.

Using buttons over the map image to link to each step.

< Notes considering an if/else rule to turn on/off location based functions.

Also noted is a possible search field and variables you could search for.

This could be animated to re-enforce issues raised in the Fortune Magazine article (above).

Take a look for yourself, with the AppFurnace App: