Research and Journal

PHP - File Path Technique

2018-10-04T22:37:00.001+08:00

Example of file path techniques. Breaking a few part from a index.php

1. header.php
2. footer.php
3. index.php

→ header.php

<!doctype html>

<html lang="en">
<head>
    <title>eSeong Page</title>
    <meta charset="utf-8">
</head>

<body>
    <header>
      <h1>Welcome to eSeong Page</h1>
    </header>

    <navigation>
      <ul>
        <li><a href="index.php">Home</a></li>
      </ul>
    </navigation>

→ footer.php

<footer>
© <?php echo date('Y'); ?> eSeong
</footer>

</body>
</html>

→ index.php

<?php include('header.php'); ?>

<div id="content">
</div>

<?php include('footer.php'); ?>

Preview page as below :
→ http://foodwall.asia/eSeong/filepath/

If you can't get the page working, please let me know the error in comment.

Android and iOS - Marketing Your App

2014-07-12T14:29:00.001+08:00

How to deal with journalists

You might find that a journalist is closer than you think. Scour your network of friends and find out if anyone works for an online magazine, a newspaper or a PR agency. You never know who might be willing to lend a hand.

Modern news media is not an essential gatekeeper for your app to be seen. We have had apps that were picked up by the national and international press and, although sales have definitely spiked asa result of such media coverage, these spikes are nowhere near what you might see if you’re featured on iTunes, or reviewed favourably in a popular tech blog. Our advice is to avoid wasting your time with the major newspapers and magazines: Even if they featured your app it would probably do your ego more good (or bad!) than sales. You would probably be better off focusing your efforts on more targeted outlets such as blogs and Twitter.

To get coverage from a blog, write politely to the site editor, or the features editor if the blog has a section that deals specifically with apps. State very clearly (in no more than three or four short sentences) what your app does, its purpose, and why the blog should find it relevant to their readers. Imagine the world’s most bored, cynical, depressed person reading your email – this almost exactly describes over 80% of journalists – how do you make them perk up?

So: In clear English get to the point quickly, then send the email. The rest is in the hands of Lady Luck. Here is a list of some great blogs to pitch your app to:
• Engadget
• Gizmodo
• Daring Fireball
• The Verge
• CNET
• Recombu
• Wired
• Macrumors
• TUAW

Using YouTube as promotional tool

A few years ago an advert would cost you tens of thousands of pounds to make, and hundreds of thousands of pounds to air on television. Luckily, today television is free - Well, the only version of television that counts is free: It’s called YouTube.

We spent zero pounds making the advert for Alice for the iPad, and at the time of writing, it has almost 2 million hits and shifted over half-a-million apps. To get that number of viewers on a TV advert, you would have to spend millions of dollars. We did it with zero. And you can too.

Making a video

A picture is worth a thousand words; a video displays 60 pictures and upwards a second. So a 30 second video is worth approximately eight billion words. This will save you a lot of writing. Take a look at some existing app promo videos.

Take a look at Alice for the iPad:
http://www.youtube.com/watch?v=gew68Qj5kxw
Nursery Rhymes with Storytime:
http://www.youtube.com/watch?v=wLUvzG6CWUQ

Chris Stevens shot both of these videos personally. The Alice for the iPad video cost nothing to make, the Nursery Rhymes with Storytime video cost £200 - and all of that was the cost of hiring the male actor. The set was borrowed, the people were friends, the light was all natural. These two videos demonstrate the enormous potential of near-zero-budget film-making to promote your app. If you have no idea how to shoot a video, find a friend who does, or trawl vimeo for amateur film-makers whose work you like, and make them a small cash offer.

Finally, don’t make the mistake of publishing a video that is more than about 30-seconds. Generally everyone’s attention is so fried from constant exposure to MTV-style programming, that you will completely lose your audience with a longer promo.

If you can’t pack your app idea into a 30-seconds video, then you’ve overcomplicated your app. Take another look at previous post to make it concise.

Good luck with your app. It’s a brave new world out there, and I’m glad to have you be a part of it!

Android and iOS - Submitting your app - Part 4

2014-07-12T14:08:00.003+08:00

Android and iOS - Submitting your app - Part 3

Keeping up-to-date with sales statistics

There are great resources to keep yourself up to date with how your app is doing. Here are just a few:

Pricing techniques

It’s important to be aware that if you have ten people in a room, 8 of them have no interest beyond keeping
their job secure, one is there to criticise everything they see, and then, there’s you. So, most of the room
is going to be against anything that is either
A) new
B) risky.

Since A tends to equal B, you might as well ignore the opinion of everyone in any corporate environment. Ask yourself how a manager got into the position they did?
Most likely by not messing up.

But innovators mess up a lot on the way to success. You will hear a lot of different theories about pricing strategies, but time and time again we have seen newcomers deal with app pricing in new ways, and often against the grain of established theories. If there is one consistency at the moment, it is this:

App designers tend to price low and make profit through sheer volume. Games, in particular, have settled around a 99 cent price point because this has become lodged in the consumer vernacular: Users don’t want to risk more than this on a new game.

The fortunate thing is: Even a moderately successful game will make a very impressive amount of money because there are so many smartphone users out there. Distimo is a great place to get pricing data from, so that you keep up with the latest trends.

Strategies for dealing with rejection from an app marketplace.

If your app is rejected from any mobile store, you will receive information on why it was rejected. Often this is fairly cryptically worded, and you may find yourself disagreeing with the reasons specified. My advice is to avoid getting into a lengthy, and extremely slow, argument with Google or Apple. Instead, do everything you can to address the concerns. You can often find clever ways of working around issues without changing the core mechanisms in your app. The most common reasons for rejection include your app crashing the device; your app infringing copyright on a major brand name; your app demeaning a public figure; your app violating privacy; your app using an undocumented feature of the device.

These are just a few reasons why your app might be rejected, but, in most cases, your app will pass just fine. It’s important to consider, right at the beginning of the design stage, whether you think your app is in any way controversial. It’s rarely worth wasting months creating software that the major app stores will refuse to sell.

Read Back - Android and iOS - Submitting your app - Part 1

Android and iOS - Submitting your app - Part 3

2014-07-12T14:02:00.000+08:00

Go back - Android and iOS - Submitting your app - Part 2

The Apple submission process

Once your app is created, the programmer will submit a ‘final build’ of the software to you. A ‘final build’ is the last version of the software before you decide it is ready for release. At this point, you must login to iTunes Connect and let Apple know that you are ready to submit a ‘binary’. This is a simple process of entering a description and clicking a button. At this point, you can use the Xcode software to upload your app to Apple’s review system. Once this is done, Apple’s team of reviewers will soon begin poring over your app, testing some basic functionality and determining that it meets their submission criteria.

The most common reason for an app being rejected by Apple is that it crashes the device. This might seem like a very simple problem, but you would be surprised how many apps get rejected for this reason. Test your app thoroughly on different iPhone and iPad devices, as well as the latest iteration of the iOS software. We have found graphics processing quirks that are unique to certain versions of hardware - and, although these are rare, the last thing you want is your app’s comment section filled with abuse from angry users.

When your app is approved, you will receive notification from Apple and – depending on what you specified at the time of submitting your app – it will be available on the store immediately, or on the date you determined. Once it’s live on the store, sit back and hold tight, it’s time to watch the money roll in.

The Android submission process

Publishing your application on Google Play involves a few simple steps. First, you must create the graphics that will sit alongside the download link for your app on Google Play. Then you can open up the Google Play Developer Console and select the publishing options, enter details for your app, and upload all this information, together with your app ‘binary’ to Google’s servers.

Google, as with Apple, recommends that you create attractive screenshots to accompany your app on Google Play. You can pack the listing for your app with screenshots, videos, graphics, and text. Google Play
has a minimum requirement of two screenshots of your app, together with a high-res application icon.

Getting featured

In my experience, there are only two ways to get featured on the app store. Either be a giant corporation like Disney or Random House, or The BBC, or make an app that is so great that Apple notice its brilliance and decide to promote you in a highly-desirable banner advert in iTunes. This is the holy grail of endorsements and will bring you many thousands of downloads in the space of a few hours. However, I know lots of people who got featured as banner apps, but because their app was not strong enough, sales quickly trickled away. The aim is to be brilliant, get featured, and sustain sales.

There is no special trick to getting featured, and it’s rather like being at school - just keep working hard and hopefully the teacher (Apple) will notice your work and pin it to the wall. Good luck.

Tips and tricks to improve store rankings

There used to be a variety of ways to improve app store rankings. In fact, at the beginning of the app revolution, developers discovered that they could rise up through the charts simply by submitting as many updates as possible. Each time they submitted a new update, their app would rise to the top of the ‘New releases’ list and they’d see an increase in sales.

More recently, developers have stolen credit card numbers and used these to artificially increase the download rate of their app. This encouraged other, legitimate customers, to assume the app was great, and download it themselves. This practise was quickly halted by the major app stores.

The most recent trick has been to rip off an existing app idea and give it a similar name. While this behaviour has been clamped down on in the Apple App Store, the Google Play store is still wide open to this kind of abuse.

The simple truth is: You can’t really use tricks to improve app store ranking, and if the store owners catch on, there is a good chance they might kick you out. The best tips or trick for getting you app to rise through the charts is this: Make a great app.

Read Next - Android and iOS - Submitting your app - Part 4

Android and iOS - Submitting your app - Part 2

2014-07-12T13:53:00.000+08:00

Go back - Android and iOS - Submitting your app - Part 1

Your app icon

Designing an app icon is a very personal process and the value of a great icon can’t be overstated. The main reason that the casual masses will be attracted to your app is the icon.

The first rule of app icons is this: Never use words. You already have the name of your app clearly posted. It’s printed right beside it. Icon is short for iconographic - meaning a picture that contains a meaning. If you include words, not only do you confuse the icon, but the effort is completely redundant. Obviously, some
successful apps do include text in their icon, but it’s in spite of this, rather than because of this, that they have become successful. The image you should use in the icon should, ideally, be purely graphical, not typographical.

Keep your icon designs simple. If you try and pack in too much information, the design will become cluttered and upsetting. You only have a few pixels to convey the main purpose of your app. If you use this space to explain too much, you’ll end up explaining nothing. The best icons come from a process of determining what it is that your app does, the one thing that your app does, and reducing this to its clearest, most obvious, graphical sign.

Let’s take a look at one app icon.

What does this app do?

Take a wild guess? You got it, right?

It takes photos. It is, in fact, the icon for Instagram, the popular photo software for Android and iOS. How about this app icon?

Could you work it out? It’s some sort of a game, clearly, the frog looks bold and friendly, and most people would be curious to know more.

This is the icon for the popular game Cut The Rope. If you’ve played the game, you’ll know that it involves slicing ropes with your finger. You can see how this icon conveys a huge amount of detail about the action involved in the app. If you can, make your app icon describe an action.

As with so many elements of design, there is a wide scope for innovation and invention.

Take the ideas I’ve described here and don’t be afraid to break the rules once in a while.

Read Next - Android and iOS - Submitting your app - Part 3

Android and iOS - Submitting your app - Part 1

2014-07-12T13:48:00.000+08:00

How to name your app

First impressions are significant in everyday life, but even more so in the crowded mobile app stores. Impulse purchases drive a huge chunk of app sales, and naming your app the right way is the first step to grabbing the attention of a casual browser. The app store is packed with apps: Consider just how difficult it is to stand out, or pick an app name that hasn’t already been taken. For example, let’s take a look at what happens when you search for a simple calculator app on the iTunes store:

There are several thousand hits for the word ‘calculator’. Which do you pick?

It’s tempting to take advantage of existing app-prefixes and give your app an name like Auto-something or
Insta-something or, for a game, Angry-something. Let’s take a look at just a tiny glimpse of the apps that use ‘angry’ in their title.

Clearly these designers are attempting to cash-in on the success of the smash-hit app Angry Birds:

Sometimes this cynical effort works: People might buy your app by accident. But why clutter the world by so blatantly recycling the ideas of old. If you believe in your app, you should give it a name that comes from your heart. Begin by thinking about two words that might best describe your app and see what happens if you combine them. Consider also, TweetBot - a combination of Tweet and Robot.

It’s also often helpful if you make clear, or at least strongly hint, at what your app does. The more abstract you get, the harder it is to get the casual mobile user to pay attention. It’s also a good idea to pick a name that people can say out loud without wondering if they’re pronouncing it correctly. Nobody likes social humiliation, so don’t invite the possibility. Also, be wary of peculiar spelling conventions - all uppercase characters, or starting the app name with a lower case character and other odd variations is just not good manners.

Check to see if your app name is available as a .com domain on the internet. This will help people to find it. If it’s not available, this is not a disaster - but, make sure that the domain is not being used by a similar business or service. They may sue you.

Finally, don’t use more than 11-12 characters in your app name - and if you use more than 10, check that the whole of your app name appears under the icon on mobile phones. The UI on Android and iOS has a habit of truncating long app names, so you end up with part of the app name cut- off. This looks ridiculous and unprofessional.

Read Next - Android and iOS - Submitting your app - Part 2

Android and iOS - Understanding games

2014-07-12T13:41:00.002+08:00

An introduction to the world of mobile gaming

We’ve dedicated an entire unit to games production, because it is by far the most lucrative genre of app. Never before in the history of video games has there been such an opportunity for developers to compete on a level playing field. The established pattern was always that indie developers would flourish on any new platform - like basic plant life colonising an island, prior to larger, more complex species taking over. What
has actually happened was quite unexpected: rather than the Android and iOS platforms becoming overrun by gaming giants like Nintendo, Sony and others, indie developers have actually increased their dominance. Despite the frantic gobbling of indie publishers by larger companies like EA, the big corporations have not been able to cut all the heads off this hydra: Indie developers are faster and more inventive. Now that the established gaming companies have their distribution advantage taken away – we no longer buy our games pre-endorsed from shops, or on physical media – they cannot seem to get a good footing in the smartphone
software market. Apple and Google have created an egalitarian system, a kind of pure-capitalism - without unfair practices such as “buying shelf space” etc. – and mobile gamers all over the world have embraced the work of small, bedroom designers.

This is all fantastic news for you, as an indie app designer. Digital distribution has completely redefined the way the video games industry functions. Games that are cheap, and often free, have gobbled up billions and billions of dollars of revenue that would otherwise have gone to the traditional big players. There has never been a better time to get involved in designing indie games for the Android and iOS platforms. The days of Sony and Nintendo charging upwards of $40 for a new game release are fast evaporating. Consumers are
eager for portable, phone-based games and casual experiences that delight and encourage socialisation. Not only are independent games companies’ profits rising, but mobile games have completely usurped Nintendo’s position as the gamer’s favourite company. This is the age of the indie.

The risks and thrills of game design

Gaming, like all app design genres, comes with a certain risk attached. Bear in mind that, not only are games designers some of the most wealthy software producers in the mobile app world but, at the other end of the scale, they are also some of the very poorest and most frustrated. Game design can be an expensive business, and the games charts are the most competitive in the App Store and on Google Play. If you do decide to create a game as your first app, make sure that you pick a simple concept with a manageable budget. To illustrate the point: one of our games, Twitch Origins, took about six months to build and, three years later, it has made a grand total of £200 ($300). Yes, £200. Although our later apps shifted thousands
of copies, this game sold a couple of hundred.

This is the risk you take with the gaming market – production costs are enormous, testing needs to be extensive and time consuming, and – to top it all off – mobile gamers are the least tolerant app buyers known to mankind. If they don’t like your app, they’ll scream and shout about it all over the internet. It’s a tough world!

As a second case study, consider the amazing game Whale Trail by ustwo. This is a fantastic A-grade title that has sold hundreds of thousands of copies. The problem?

It cost over £150,000 to create in man-hours alone, and has yet to turn a profit. Whale Trail was created by ‘Chief Wonka’ at ustwo, Mills. He later explained the public response to the game in an interview in Hookshot magazine:

“It did well for a while,” Mills told Hookshot. “It was doing 11,000 downloads a day, which was great. We got over 3,000 positive reviews on App Store. There was no hate! I mean, usually with the things we do, we get a few people saying ‘this is awful!’, or they just didn’t understand it. But Whale Trail did 100,000 downloads in 25 days!”

But then Whale Trail dropped down through the charts in a dramatic decline.

“Well, that’s part of the challenge and the excitement,” Mills told Hookshot. “I think it’s nearly impossible now to make the impact that titles like Angry Birds once made.”

“We’ve seen so many titles getting Game of the Week, going high up into the top 100 and then disappearing when the promotion ended. Of the nine I tracked after Whale Trail launched, none of them were in the Top 100 three or four weeks later.”

“That’s just insanity – you can’t get enough eyeballs on your game; you can’t generate the word of mouth you need. The freemium chart is full of developers who openly admit they effectively buy users – there’s nothing wrong with that. But as soon as they stop that tap, they’re out of the charts.”

“It’s crazy that Whale Trail could be perceived as such a success, but within 25 days it was at 180 in the UK chart. I mean, what we did for that launch, you couldn’t have done any better. There’s nothing more we could have done. And yet it wasn’t enough.”

Ustwo is an established developer, with enough talent to fly to the moon, so how did they not make a profit on Whale Trail ?
The answer is simply this: Games are hard. The rewards for the lucky few, however, are massive.

Learning from the world’s most successful mobile games companies.

Successful games have a few things in common. I’ll touch on them here, but the key to understanding this properly is to get out there and play the games.
• Loveable, recognisable lead-character(s):
Think Mario, Sonic, Angry Birds or Crash Bandicoot.
• Instant appeal: Remember most mobile gamers are casual gamers. They don’t have time for complex backstories or twisting plots. Don’t think Final Fantasy.
Think: Tetris or Space Invaders.
• Frequent updates: Some of the most popular games on the mobile app stores have gained vast audiences simply by updating regularly and keeping in close contact with fans on forums. Take a look at the app Pocket God. It has a huge fan base and relies almost entirely on frequent updates as the source of its fortune.

It may blow your mind to learn that Android and iOS gaming market has grown its share from 20% of the total gaming market three years ago to a blistering 60+% today. Take a look at the past masters of the industry such as Nintendo, and you witness the steady disintegration of the cadaver, its bony digits trailing down the wall of an office block somewhere in Tokyo. Just a few short years ago, Nintendo had its ubiquitous hands wrapped around two-thirds of the gaming category, now its clutches hopelessly at a declining one-third. All the while, Android and iOS game revenues have grown to over $2 billion. The little Italian plumber has had his day.

Android and iOS - Integrating sound

2014-07-12T12:40:00.000+08:00

How to use sound-effects and music to give user feedback

You can only access your users’ sensory experience through three mediums: touch,sight, and sound.

It’s important to treat all three as integral to the app experience, and to consider where appealing to one sense is more helpful than appealing to another. It’s a mistake to assume that sound is not an important part of your app. Although you can get by with mute software, adding sound not only lends a finesse to your final
design, but lets you provide instantaneous feedback to users. Sound has become such an integral and exciting part of app design that there are now entire apps which use nothing but sound to orientate a user in their universe. Take a look at the app Papa Sangre for one beautiful example of this kind of work.

Sound is an obvious consideration for games or music apps, but is it necessary for a tax-return app, or a calendar?

The answer is, yes, it is still essential. Even if you ultimately choose to exclude sound, you are making the decision to deploy silence: which, as any musician knows, is specifically denoted on sheet music. Silence is also a meaningful “sound”, and needs to be incorporated wisely. Let’s take a look at a situation where sound
has been used horribly and for no purpose. You’ve probably worked in an office with someone who has a sound effect set up for every action their computer performs. When an email comes in, there’s a little ‘ping’ sound, and every time they delete a file, you hear a ‘woosh’ noise. After a short while, you want to peel your own face off, roll it into a trumpet and scream through it. system alerts are usually a terrible use of sound,
and one you should certainly avoid in your apps.

In our example office situation, the sound effects serve no purpose. The incoming email sound is so regular and intrusive that it soon becomes meaningless. In the same way, the file deleting sound serves little purpose:

It merely confirms an action that a user has already performed using their mouse. Giving audio feedback on top of this visual confirmation is pointless and therefore irritating.

Think carefully about sound, and the absence of sound. Are you giving your users essential audible cues to indicate non-visual events, or will you irritate them with the addition of mindless beeps and chirps?

Programmers will expect your sounds provided to them in a mainstream format: WAV, AIFF or MP3 or, in the case of Apple devices, AAC.

Keep an eye on file sizes; although there is really no limit to the size of a music file you include with your app, it may cause a small app to become ten times the size. Discuss sound requirements with your programmer and follow their advice.

Using sound to create an atmosphere in your app

Sound is a shortcut straight into your users’ emotions. You will probably have noticed how moving music in films and on television can add poignancy. Try watching an important scene in a film with the sound off: Do you feel the same emotional resonance now?

Similarly, the combination of sound with images can create emotionally evocative experiences - consider an app like Osmos HD, which is utterly mesmerising in its use of sound to enhance the visual experience.

In most apps sound could be used a little but, if you are creating a game or entertainment app, sound could not be more important. Smartphone gamers are often commuters, and will listen to their devices using headphones. Although you should provide the option, in code, for the user’s own audio library to override the in-game music, you should also assume the user may want to be listening to any music you provide.

Choosing appropriate sounds to enhance the atmosphere you create for your app could make the difference between a hit app and a desperate failure. On the next page you’ll find examples of apps that make amazing use of sound. Download some of these and use them as your yardstick.

There is one other kind of sound to consider, though it is more tactile than audible: It is the vibration feature on many smartphones. Sound is caused by vibrations and inside many modern smartphones is an device that can cause the entire unit to vibrate. Again, use this feature with caution, but be aware it is there. Often it can be used in games to indicate an impact, but you may find new and novel applications are possible.

Where to source free music

Here are some great places to find music for your app. Be sure to double check the licensing terms on every track you consider using:
• Soundcloud http://soundcloud.com/• ccMixter http://ccmixter.org/
• Magnatune http://magnatune.com/genres/
• Jamendo http://www.jamendo.com/en/?p=tags

Android and iOS - Innovative app design

2014-07-12T12:32:00.001+08:00

A review of input options

Smartphones have a broad range of input options – everything from voice recognition to a digital compass. From a design perspective, this is a great place to start your creative journey. Instead of asking yourself what software you should design for a smartphone, ask yourself what features in the hardware you can showcase
through software. The most popular apps often take advantage of the unique feature set of a touchscreen device. The input mechanism comes before anything else; it is the conduit through which all user experience with your app will flow. Many first-time designers fixate on an idea before considering the input system that controls the software. Remember: Input is everything.

Let’s take a look at the input options available to you on the typical modern smartphone device. As you read through these input types, start thinking about app ideas that will exploit the hardware:

Creative solutions to control systems

It doesn’t matter if you’re making a word-processing app or a 3D game, you must be certain that your app takes advantage of the specific hardware on the platform of your choice. If you don’t have a single and compelling purpose on a touchscreen platform it will be very difficult to inspire market interest and provoke press coverage. By ignoring the hardware, and just dreaming up your app, you risk losing a small fortune on a failed project.

Think first: How can I use this hardware in a unique and creative way?

The purpose of your app stems from the input method used to control it.

Other input systems to be aware of on major smartphones include the GPS (Global Positioning System) which allows you to discover where a user is geographically – this is especially useful for mapping apps and other location-aware services. Finally, there is a newer sensor, called a digital compass, which can not only geolocate a user, but also let your app know what direction the user is facing in. This can help with navigational apps. You can also dream up uses that nobody else has thought up yet. All these control systems supply raw data, it’s up to you what you do with those data feeds.

Working with the accelerometer

The accelerometer is an amazing device that can detect the direction and force of motion applied to a smartphone or other mobile device. It can be used to signal a change in screen orientation by a quick flick of the wrist, or a variety of other manual gestures. The accelerometer feeds live data to the smartphone cpu, and you can interpret this data however you like. The possibilities are endless and exciting.

The accelerometer has been used in apps like Labyrinth to allow mobile devices to simulate a traditional wooden ball puzzle. Users navigate a tiny bearing through a maze, avoiding perilous holes. The effect is remarkable: to the end user it feels as if they are genuinely holding a physical game. The accelerometer reports back to the app, letting it know exactly how the mobile device is currently being tilted, so that the software can perform a calculation and create the illusion that the ball on screen is reacting as a physical toy would in the real world.

Other uses of the accelerometer include sensing speed and force of impact. There is even a bizarre game that dares you to throw your phone in the air, giving you more points the higher you toss it. To us, this sounds like a recipe for a nasty lawsuit, but it’s a fascinating illustration of the kind of unexpected uses you can find for this clever sensor. Also, check out Alice for the iPad and Alice in New York. We used the accelerometer in both of these apps to influence the behaviour of physical objects on the screen. For example, if you tilt the device, then the White Rabbit’s pocket watch begins to sway.

This is not, however, a pre-determined animation. Instead, the pocket watch moves in direct response to the force and direction of motion, responding as if it physically exists. To achieve this we used a free physics engine called Chipmunk Physics. This is an amazing tool for any app designer and you can find out more about it here: http://chipmunk-physics.net/

Finally, take a look at these other brilliant apps which utilize the accelerometer to great effect. Download them and consider how you might use the accelerometer in your own app designs.

Android and iOS - Prototyping - Part 2

2014-07-12T12:20:00.002+08:00

Trends in mobile UI design and typography

Let’s take a look at some of the latest trends in user interface design. You can see from these examples that the UI world is heading towards minimalism and simplicity, especially in mobile app design. The overburdened designs of the past have given way to a fresh new era of pure-purpose.

How offering fewer choices frees the user: Why less is more.

Good design is more about what you leave out than what you put in. Make sure you have refined your idea to its purest point. Take a leaf out of leading designer Jonathan Ive’s book. He has said, “Most of our competitors are interested in doing something different, or they want to appear new - I think those are completely the wrong goals. A product has to be genuinely better. This requires real discipline, and that’s what drives us - a sincere, genuine appetite to do something that is better. Committees just don’t work, and it’s not about price, schedule or a bizarre marketing goal to appear different - they are corporate goals with
scant regard for people who use the product.” This is key to great design. The more choices you offer a user, the less they tend to enjoy your product. This is because every choice left to the user is an unfinished design decision that you did not have the confidence or authority to make for them. Computers are fast becoming appliances, and this is no bad thing. Mobile devices with touchscreens are set to reach people in a way traditional computers never could - these are the people need you to design for, make good choices for them. Be brave and be bold.

Read back - Android and iOS - Prototyping - Part 1

Android and iOS - Prototyping - Part 1

2014-07-12T12:14:00.002+08:00

Mocking up designs on mobile platforms

Building design prototypes might seem like the kind of thing that massive design studios do, not tiny indie programmers working out of a wheelie bin. But in reality, prototyping is an invaluable step for all designers, big and small. It’s amazing how much time you can save by fleshing out early designs into prototypes. Resist
the temptation to plough headlong into battle – not every flaw in your software can be fixed at the late testing stage. It’s essential to get 95% of the design nailed before you touch a line of code. That leaves 5% to be polished to a deep shine when your app reaches the first test users. Of course, you might choose to take a risk, forget the prototyping, and go with your gut – and, to be honest, sometimes this will work out just fine. However, you might find (as we have on occasions) that your idea is fundamentally flawed, and it’s only when you’re way too far down the development process that you realise the only option is to bail out. Buy by that point, you’ve spent too much time, too much money and, little by little, you’ve gone insane.

So what do we mean by prototyping?

In its most basic form, prototyping is the simple process of sketching out your app design on pieces of paper.
Don’t reach for Photoshop – you’ll get lost in a million little details and risk designing your interface for use with a mouse. Instead, get a good old-fashioned sketch pad and pencil, and start drawing. Use your iPad to make a perfect frame for your designs. Lay the iPad down on a sheet of paper and draw around the edge, now remove the iPad and approximate the bevel width, sketching this onto your diagram. When you think you have something that works, glue the sketch to some cardboard you’ve cut out to the size of the iPad. Try the interface out.

How does it feel?

If it feels good, the next stage is to scan the sketch, create rough graphics in Photoshop, then export that file
as a static photo to test on actual iPad hardware in assessing the look and feel of your app. Once you have the design on the iPad, pretend you are the user and consider a few things:
Does the app work from a crude, non-functioning perspective?
Does it make ergonomic sense?
How could you tweak, simplify and improve it?

This might be a good point to contact a programmer, show them your designs and get a sense of whether the design is
a) possible to code
b) expensive to code.

Or, if you’re working for a customer, then check back with them to make sure the designs meet their expectations for this project. Once the programmer has agree that your designs are fiesable, you will need to export every graphics asset as a seperate file. Any component that moves in the software will be saved out, usually as a PNG with alpha (transparency) included - this gives the graphic complete freedom of motion.

The importance of user testing

Your instinct will be to blame the user when they struggle to use your app. But, the truth is - user error does not exist! There is no such thing as user error, only bad design.

Before you cry out in pain, consider this: Good design will guide a user towards the correct interactions, it will anticipate mistakes and adjust the course of the interaction to put the user back on track. It will not punish a user nor cause unexpected user behaviour.

It may be that you have a fierce and brilliant mind - one that can imitate the behaviour of every type of user and therefore foresee problems they will run into - if so, you don’t need user testing; you can play the role of both the designer and the user. But, you would be the first such human. What’s more likely is that you will need to observe real users interacting with your app.

Watching a user failing turns potential difficulties into real, tangible obstacles. You cannot deny the terrible reality of a user floundering while navigating your app. You will observe first-hand how what you thought were obvious routes through the app were only obvious to you and nobody else.

Don’t worry, this is a fairly common experience. The important thing is to learn from these observations and improve your app design.

Historically, computer experts have been quick to blame computer users and their naivety or even stupidity. But, you may have noticed that the average computer user is capable of fairly complex tasks: walking while in deep thought, holding simultaneous conversations, perhaps even rock-climbing. If they fail to use your app properly, the correct response is to figure out what you did wrong. Unless your app is somehow more advanced than human language, or deeper than the mystery of love, you have no excuse. The user is not at fault, your app is. Fix it.

Read Next - Android and iOS - Prototyping - Part 2

Android and iOS - The 'feature fallacy' - Part 2

2014-07-12T12:05:00.002+08:00

Learning from examples of good and bad interfaces and feature sets

One option for a designer hell-bent on packing multiple features into a mobile app is to release these features incrementally. This is largely how many successful tech companies like Apple operate. The corporation is notorious for launching devices with extremely limited feature sets, then slowly adding features as it becomes clear how best to implement them. Apple also tend to observe how customers are using its hardware and software, then tailor updates accordingly. You should consider adopting the same process when designing your apps.

Smartphone app users are exceptionally critical – even if your app is free. So, you’ll have a better chance of getting good ratings for your app if you take things one step at a time. Try and do one thing, really, really well, rather than pack in two or more additional features. Bizarrely, Interface design analysts have observed how the addition of features often tends to infuriate the bulk of app users. The largest group of people using your app will be those using the least number of its features, design your app with these people in mind because they represent the mass market. The majority of smartphone users have very specific needs that are often overcomplicated by programmers.

The importance of elegance in app design

Many designers think that complex equals powerful. In reality, simple equals powerful. Do one thing the best you can before adding extra functionality. Don’t get distracted.

Here are a few examples of the apps we think best embody this design ethos.

Read Back Android and iOS - The 'feature fallacy' - Part 2

Android and iOS - The 'feature fallacy' - Part 1

2014-07-12T12:01:00.001+08:00

Understanding the Feature Fallacy

The process of over-engineering and over-complicating an app is called ‘feature creep’. This is what happens when an unfocussed reckless software design team keeps adding features to a product, causing it to become more and more grossly fat and indecipherable. It may surprise you to learn that 95% of users could not care less for 80% of the options, menus, and settings available in an average software package. The vast majority use a piece of software for just one or two simple features – and that’s it. Open up Microsoft Word
and take a look through the menus.

How many of that labyrinthine tangle of possibilities do you ever use?

Most of us use the font menu and the font size menu, and that’s about it. Many of your favourite desktop apps have fallen victim to feature creep.

The problem of feature creep is rarely a problem on desktop computers - screen real estate is not at a premium, and it’s easy to ignore large portions of the user interface. However, on a touchscreen mobile device, the opposite is true. Every unnecessary button, step in the process, graphical device, or setting, gets in the way disproportionately on a small screen, and is especially confusing when the main input device – the human finger – is so prone to obscuring the view of tiny user interface details.

It is important that you take care to reduce the purpose and feature set of your app. If you focus on the economy of your idea, you will produce the most concise and elegant app possible. Ignore anyone who tells you a bonus feature is essential, or will attract more downloads – this is rarely true. What is true is that users will instantly reject your app if they cannot understand how it functions, or are bewildered by a dense and tricky-to-navigate series of nested menus. You will also save yourself money in development costs by sticking to a single, strong vision.

How to creatively reduce the number of features in your app

The way to design a great app is easy to put into words:

Strip everything down to its most basic form, then strip it down some more, then keep stripping it down further until its single purpose is perfectly obvious.

Sadly, for many designers, (but perhaps happily for you) this advice is rarely observed. This is because of an unfortunate and inevitable quirk of the software design process: Software is made by programmers.

Now, programmers are some of the smartest people we know, but they tend to lack the ability to relate to a software user who is not a programmer. As a result, a programmer may be inclined to add as many obscure features as possible because they themselves look for additional features as a buying criterion in the software they use. Programmers enjoy extensive and detailed control over everything, but the majority of end users do not want, need or benefit from that degree of control. They want ease-of-use.

Every feature you add to an app potentially reduces the ease-of-use. This is not to say that it is impossible to design a fantastically powerful piece of software for a touchscreen, but simply that the process is infinitely harder than with desktop software, requiring incremental user testing and paying very close attention to the design process.

Read Next - Android and iOS - The 'feature fallacy' - Part 2

Top tips for touch-screen design

2014-07-12T11:48:00.000+08:00

How to strip-down features and design elements to increase usability and sales

To the untrained eye, a finger looks podgy and inaccurate in comparison to a mouse pointer.

How, you might wonder, can this flabby, clumsy little digit replace the pixel-perfect accuracy of a mouse?

Well, though human fingers may seem like bloated embarrassments, they are in fact more versatile. They can pinch, rotate, zoom, stroke, dab, slide, flick, and many other gestures are within the finger’s repertoire. But, best of all, the finger allows something called Direct Manipulation.

What is Direct Manipulation?
Well, consider this: When you move a computer mouse, this motion is conveyed along the wire connecting the mouse to the computer, then into the computer screen, then to a mouse pointer which moves in relation to the motion of your hand.

The action on the screen and the action of your mouse are connected, but they are indirect: The motion of the input device (the mouse) causes the motion of the pointer. Contrast this with the way a user’s fingers manipulates targets on a touchscreen mobile device:

On a touchscreen you literally and directly ‘move’ the objects you are interacting with.

Touchscreen manipulations, and the way we interact with actual 3D objects in real life, are almost exactly the
same. The manner, direction, distance, and speed of movements are all directly determined by your fingers. Fingers specify the direction of travel, how far the object moves, and how fast it moves. This is the first time in the history of computing that mass market devices have allowed direct, and literal, manipulation.

The touchscreen is totally unlike a mouse. With a mouse, you must fish about wildly on the screen, first to locate the pointer position, and then to adjust your movements relative to this starting point. The touchscreen, however, allows you to instantly ‘see’ where you want to touch and home in straight on this point. There is no need for orientation. This is the magic of touchscreens. The other great thing about touchscreens is that you have lots of fingers available to you at any one time. Again, contrast this with the traditional mouse or stylus input system. Mobile devices have been popularised by the emergence of the finger as a new input instrument.

It has often been said that the best camera is the one you have with you, the same is true of input devices. The best input device is the one you have with you. For most people on the move, this is the human digit. You don’t have to rifle through your dusty backpack for a stylus, or peck about on an inefficient travel keyboard. The touchscreen has liberated us from decades of cumbersome computer input paraphernalia.

Understanding finger ergonomics

Fingers can be remarkably efficient at inputting complex information. Consider the efficiency of sign language. See how vivid and meaningful hand gestures can be. Many touch screens respond to over eleven finger-touches simultaneously; this gives you enormous scope for different interaction methods in your apps.

You can create an infinite number of potential gestures, and these gestures can consist of approximately eleven touches in any combination. As an analogy: if you consider the eleven touches to be ‘keys on the keyboard’, these gestures are ‘words’- i.e. the result of combining letters (or, in our case, finger gestures).

Take a look at how the apps in the screenshots in this post use input gestures, enabling the user to perform complex manipulations very simply. Just for starters, finger manipulation allows you to scale, spin, trim, and edit objects. Interestingly, developers have observed that some gestures are beginning to form part of a universal gesture vocabulary - where the same gestures have a consistent effect across different apps. Make finger gestures an important consideration when planning and testing your app.

Android and iOS Utility Apps - Part 2

2014-07-12T11:30:00.002+08:00

Twitter

Even if you have never used Twitter, you will have heard of it. Twitter is an app (and a website) that allows users to micro-blog (to send small pieces of text information, no longer than 140 characters, to anyone who wants to listen). After signing-up and selecting some people to “follow,” you can receive “tweets” from these people and you can see what they have to say.

To sign in to the Twitter client app, you have to enter in your username (or email address) and password. This information is sent to the web service that checks your credentials and either signs you into Twitter. As with many utility apps, Twitter has a backend server that deals with the interactions between the user with the app and the information stored on the Twitter databases. Sites, like Twitter, that want to allow you (as a developer) to use their web services, often provide Application Program Interfaces (APIs). The precise details of how to implement the API depend upon the specifics of that API. For example, Twitter has different APIs available in different computer programming languages. Twitter provides methods in it’s APIs for almost everything that you can do with Twitter, making it easy for developers to add Twitter functionality into mobile apps.

For an Android app, the Java API Twitter4J might be the best API choice. While in iOS5, Apple has provided a Twitter framework within the operating system. This makes accessing Twitter functionality from within apps on iOS very easy. Twitter also provides APIs for anyone who wants to connect to their web services.

However, if you want to create an app with your own dynamic content, you might have to create your own
web service to use with a custom API that you code by hand. This often involves web programming – using a different computer programming language than the one used to create your app. In order to create an app that provides the user with customized dynamic content from the internet, this backend programming is done to set-up your database. It will then be accessed through the web services on your server.

Now let’s take a look at a photo app.

Instagram

Instagram is an app that allows users to share photos. You take a photo using the camera in your iOS or Android device, then you apply vaious filters to the image to create the illusion of a vintage photo. Lastly,
you can upload the photo to Instagram and optionally to Twitter, Facebook, Foursquare and Tumblr. Once you’ve knocked yourself out with all the sharing you’re doing, you can browse through other people’s photos and leave sarcastic comments.

Instagram’s core purpose is to take a photo and share it.

Let’s deal with the photography process first:

To use the camera feature of a phone, the app has to have the user’s permission to use the camera. There are methods in mobile operating systems that control the camera function. These are native features and vary between platforms and, in the case of Android, specific hardware setups. A camera instance is created programmatically, then the when a picture is taken, the photo is stored on the device.

After the photo is stored, Instagram gives the user options to change the appearance of the photo. This is done through preset filters. The programmers of Instagram created a number of preset filters that change the way the photo looks by altering different combinations of the technical specifications of the photo e.g. hue, lightness, saturation, chroma, etc. By changing these technical specifications of the graphic in specific areas of the photo, many different looks can be achieved.

After the photo is saved with the desired filter applied, the photo is uploaded to Instagram’s database, on their servers, using their API. Instagram also allows users to upload their photos to other social network sites using their respective APIs. The user is given the choice of where to upload their photos.

Giving users enough choices, without creating clutter or confusion, is one of the things that Instagram does brilliantly. First, the user is presented with a range of attractive filters to change the look of their photos; then they are given access to a selection of social networking sites where they can upload their photos. But don’t be fooled into thinking that more choice equals happier users. Often, eliminating choice is the bravest and most rewarding design decision – as well as the most profitable. Choice can be bewildering, so make sure that most of the minor decisions are already made for the user. An app with an array of options rarely sells. It’s too confusing for a mass audience. Top designers don’t offer much choice: They’ve already made all the right decisions on the user’s behalf, leaving them to enjoy a few fun tweaks.

Read back - Android and iOS Utility Apps - Part 1

Android and iOS Utility Apps - Part 1

2014-07-12T11:29:00.003+08:00

Getting to grips with utility apps

Utility apps are software programs that perform a task beyond pure entertainment. In other words, just about everything in the app world that is not a game. You might develop a utility app to increase a user’s productivity or, less delightfully, you might make one to enhance awareness of a brand, or to increase customer loyalty. The apps we’re looking at are: A movie app, a magazine app, a social networking app and a photo app.

Flixster

This is a great app to learn from. We recommend you download it right away – it’s free! Flixster lets you check movie reviews and figure out which films are playing in a theatre near your current location – triangulated via WiFi. The app can be integrated with Facebook and Netflix; so you can rate movies, see your friends’ ratings for movies, or add movies directly into a Netflix queue of movies to be watched.

In Flixster, you can also see which movies are the most popular at theaters: The app pulls movie review data from RottenTomatoes.com – which Flixster bought in 2010 – and allows you to cross-reference your movie choice with reviews from movie critics and RottenTomatoes.com users. These ratings are aggregated into an easy to read percentage of people who liked the movie. Through Flixster you can get the showtimes and watch movie trailers. Have a play about with the app, you’ll enjoy how slick and obvious the interface is. This is not, however, to say that it was easy to design. Making things simple is usually hard.

When Flixster started, it was a shadow of what the app has become today. Wisely, the company started
off with some basic features to their app and added features as they grew. This is a good strategy for your own utility app: Start with some basic features and expand upon them as the user-base grows and you begin to get a sense of how people are using the software.

The engine behind Flixster relies on databases and servers. A database is effectively a huge spreadsheet that stores information. A server, as you likely know, is a computer connected to the internet that allows you to access information. Flixster accesses many different databases, and servers, to provide cinema information. These are:

The database for the theatre locations;
The database that shows the movie dates and times for each theater;
The database for recently released DVDs;
The databases for information retrieved from Facebook and Netflix;
The database for information for each movie.

And, finally, there is the database for RottenTomatoes.com reviews.

All of the information included in Flixster is retrieved from different locations. Some bits are retrieved from radically different databases, on different servers across the world, while some are retrieved from different tables in the same database. What’s important is that all of the pieces of information are put together in such a way that Flixter creates a totally new service out of existing information. This is a great way to frame ideas for your own utility apps:

How can you combine existing services or data to create a novel and useful experience?

One technique that’s used to assist in Flixter’s organization process is localization. Flixster can use your current location to show information for theaters that are close to you. This is done either through manually entering in a location or by the user allowing their GPS or Network location to be used by the app. By making the content relevant to the user, the user experience becomes personal. Another technique that’s used to enhance the user experience is to organize different types of information into tabs. Most mobile devices today have small screens. So screen “real estate” is at a premium. One strategy for dealing with this is to only show the user what they need to see, when they need to see it. This is done is by giving the user different view options to choose from. When the user clicks on a specific option, then a more specific type of interface is revealed. In this way, there exists a tree of different possibilities for what the user can choose.

It may take a few steps to get to any specific leaf on the tree; but each leaf is accessible from anywhere.

This strategy allows the user to get the specific detail they consider relevant. In our broad overview of how Flixster works, the two most important things to remember are:
1) Utility apps can, and likely should, gather information from many sources.
2) Utility apps should display that information in a way that makes it simple to navigate for the user.

Now we’re going to look under the hood of a magazine app.

Google Currents

Google Currents is an app that aggregates newspaper, magazine and blog articles. A publisher signs up to be included via Google’s website, then Google makes a e-magazine from the content provided by the publisher. The end user chooses the publishers that they would like to subscribe to. It’s then possible to read the articles and share them with their friends.

The first step in this process is for Google to get permission to use the articles. If you are going to use someone’s content in your app, you should get permission from the original publisher. Publishers are willing to give Google permission to use their articles because they can still control their content. Publishers can limit how much of their content they want to include and give users a taste of their work. In some cases, for example, users will give their email address to the publisher as “payment” to read beyond a minimum amount.

After Google has permission to use the publisher’s content, the company needs access to the actual content. Publishers can push this content through many types of RSS feeds or through manual uploads. The publisher can determine how their content is displayed through Google’s website. Then when the user choses their e-magazine, the content is displayed. Google runs a website to generate content for this app, and the website also defines how the content is displayed. After the content is created, the information is stored on a database and accessed by the app when it is needed.

As a general note, it’s worth observing that, in order to keep utility apps small, many apps are connected to a server “backend.” It would be completely impractical for the Google Currents app to update itself every time a new article is published. It would also be impractical to include all of the information for each periodical on the mobile device. Instead, the app talks to the server over an internet connection, requesting the information that is needed, when it’s needed.

This leads us to an important tip for mobile app design and development: Keep your apps small by storing most of the data the app will use on a server. Then, when a user requests information, transfer and cache (temporarily store) the information needed for that page on the local device. That way, if the user wants to look at the page again, the app doesn’t have to reload the information from the internet (which can be slow). This process can be a careful balancing act. As an app designer, you must make sure that each call to a server requests enough information (and also saves that information for possible reuse) to enable a solid user experience, while not requesting too much information at any one time – which might cause the app to become unresponsive.

The next app we’re looking at is a social networking app.

Read Next - Android and iOS Utility Apps - Part 2

App-Building Tools - Box2D

2014-07-12T11:10:00.000+08:00

Box2D ( www.box2d.org )

Box2d is a 2D physics engine for games that uses C++. It is a rigid body 2D simulation library for games. Programmers can use it in their games to make objects move realistically in their apps. The users manual for Box2D recommends that you are experienced with C++ programming before attempting to use Box2D in your project.

App-Building Tools - RhoStudio

2014-07-12T11:09:00.000+08:00

RhoStudio ( www.rhomobile.com )

RhoStudio is an application by RhoMobile that uses the open source Eclipse IDE framework to build applications that can be run on Android, Blackberry, iOS and Windows Mobile devices using HTML and the Ruby programming language.

For any developer that loves to work in the Ruby programming language, RhoStudio is a good choice.

App-Building Tools - PhoneGap

2014-07-12T11:07:00.000+08:00

PhoneGap ( phonegap.com )

“PhoneGap is an HTML5 app platform that allows you to author native applications with web technologies and get access to APIs and app stores. PhoneGap leverages web technologies developers already know best: HTML and JavaScript.” So, like Appcelerator Titanium, PhoneGap is a tool that could be useful to you if you already know HTML and JavaScript.

PhoneGap also claims to be, “The only open source mobile framework that supports 7 platforms.” If you are interested in reaching the widest possible audience from one codebase, PhoneGap might be a platform to explore further.

App-Building Tools - Basic4Android

2014-07-12T11:06:00.001+08:00

Basic4Android ( www.basic4ppc.com )

As the name suggests, Basic4Android is a tool that allows developers to create Android apps using a programming language very similar to Visual Basic. This is ideal if you already know the Visual Basic language and don’t want to learn Java.

App-Building Tools - Appcelerator Titanium

2014-07-12T11:04:00.000+08:00

Appcelerator Titanium ( www.appcelerator.com )

Appcelerator promises that you can “create rich native iOS, Android, hybrid, and mobile web apps from a single JavaScript-based SDK.” For programmers familiar with JavaScript and HTML, Appcelerator Titanium ia an excellent choice. But according to a post on the Appcelerator site, one of the downsides to a tool like Appcelerator Titanium “is that you lose control to a certain extent. You can’t do everything that you could do with native development and you don’t have as much control over what’s happening in your app as you’d normally have.” Some types of apps will be better candidates than others for these types of tools.

There might be some final adjustments needed at a low-level in the code to get the app to work on every platform.

App-Building Tools - Adobe Flex

2014-07-12T11:02:00.000+08:00

Adobe Flex ( www.adobe.com/products/flex.html )

Adobe Flex is a free open source framework that enables developers to build apps for iOS, Android and Blackberry OS using the same code. The easiest way to use Adobe Flex is to download the Adobe Flash Builder package which is free to try. The standard version of Adobe Flash Builder is $250 while the Premium version is $700.

Adobe Flex uses Adobe ActionScript (which is similar to JavaScript) and MXML (a type of XML) as the programming languages. Adobe provides a lot of resources to help you get started with Adobe Flex
.

App-Building Tools - TapLynx

2014-07-12T11:01:00.001+08:00

TapLynx ( www.TapLynx.com )

The TapLynx website says: “TapLynx. Create an app from your website in minutes.” TapLynx does not provide a web service that allows you to create your app. Rather, they provide a template that you can use with Xcode. Then they provide you instructions for updating the template with your content.

TapLynx for the iPhone costs $299 and provides the structure that an app can be built upon.

App-Building Tools - SwebApps

2014-07-12T10:59:00.002+08:00

SwebApps ( www.SwebApps.com )

The SwebApps website claims to be “the easy way to build your iPhone or Android app.” You choose either six or eight buttons for the main page of the app, then pick from a list of features that you can include in your app. The service requires payment of a one-time development fee and a monthly hosting fee. The prices for these fees are on the high end for the services we’ve reviewed in this category.

App-Building Tools - Seattle Clouds

2014-07-12T10:58:00.002+08:00

Seattle Clouds ( seattleclouds.com )

The Seattle Clouds website claims that with their online service, you can create apps for iPhone, iPad or Android devices. As with several of the other sites we’ve covered, Seattle Clouds lets you choose from a list of templates. You then add content to your app design by clicking and dragging.