Great App vs Good App: Quality over Quantity

Uncategorized

Quality over Quantity

When the app store first opened, there were very few apps in existence, and many of them were quite ridiculous. Apps such as the Fart App were at the top of the app store, and quite frankly, it was easy to create something that could become a quick success.

But something happened. As more and more people built applications, it became more and more difficult to create an app that is considered, great! This is good and bad. It’s bad because it’s become more difficult to compete. But it’s good because now you have to be very serious about your craft in order to create a competitive application, which means that it filters out a lot of developers who really aren’t that serious about what they do.

So now, why the title, quality over quantity? Well, it’s a fact that humans are excited about new stuff; new features, new designs, new everything. As a developer, or simply someone who wants to make an app, it can be easy to get caught up in the madness of wanting “new” features. Most apps that begin to be developed are never finished because people simply want to do too much. So what’s wiser, is actually to focus on the quality of the features you have, rather than the quantity of features, in order to be competitive.

Now how can you do this?

Well make sure that as you implement new features, it’s polished before you move on. Always go for the wow factor. For example, instead of just having an alert box pop up to display something to the user, why not add an animation that displays the information in an eye catching way. Make sure that every little detail is well thought out for the feature. Make sure that it’s not only functional, but beautiful. Then after you’ve done this; move on. Don’t wait for perfection, but just make sure that it’s as good as you know you can make it before advancing.

This will take your app from good, to great.

From Idea to Conception – The Road of Warriors

Uncategorized

blog-app-ideas

So you have an idea, great!  But at this point, even if your idea is amazing, nothing separates you from the billions of other people out there who also have a GREAT idea.  Ideas sadly are easy to come across, it’s execution where true success becomes attainable.  So how do you go from an idea, either yours or someone else’s, to an actual profitable product.  The answer lies just below.

Step 1 – Create a concrete idea

Why?

It is very common that people who have an idea don’t necessarily have something that they can do anything with.  For example, a persons idea may be: “Wouldn’t it be awesome if we could share pictures with a whole bunch of people at the same time.”  This is an awesome idea, but with just this line, you’re a far cry from Instagram.  So what needs to be done, is the idea needs to be actually thought out in terms of, what exactly do we want this concept to achieve, and how?

How?

So for example, the idea is: “Wouldn’t it be awesome if we could share pictures with a whole bunch of people at the same time.” Now try and answer these questions:

Why? – Why is this idea a necessary need?

People love sharing pictures, but they always have to send pictures to friends, or invite them over to watch a slideshow.  Often times, people just don’t have the time to do this, and their friends never get to share in this experience.

How? – How do you hope to satisfy this need?

We will allow the most simple way to post images using an app, and allow friends and family, and potentially anyone else who wants to view these images to view them using the app.

What? – What will you do to satisfy the need?

It will be a social networking application.  Users will be able to post images using their account.  When users like their image, they can in an easy way say that they like the image and leave a comment if they would like.  You can invite friends to view your images, or you can make the images public so that everyone can view them.

Those few lines above are now a concrete idea.

Step 2 – Create your plan of attack

How are you going to take this from an idea to an application/website?  Here is where decide things such as: Will I develop this myself, or will I hire someone else to do so for me?  Will I hire someone overseas, or do I want to work with someone here?  How much do we want to spend on this?  Should we try and get investors, or some sort of funding, or should we try to do this out of pocket? (You should probably go with funding btw)  Should we make this application run on all platforms?  Should we hire different developers for different areas, or should we hire one developer who can do it all?  How much do we WANT to spend on this?

This is when things start to get serious!  Now you’re going from just an idea, to actual work.  Most people will stop by this step if they’re not serious, especially as they start to do research on the cost of development.

Step 3 – Simplify the idea

“It’s easier to do 2 things great, than it is to do 20 things good.”

What does that mean?  Well, put simply, if you try and create a product with 20 premier features, you’re almost bound to have an extremely buggy app, with poor user experience on the first go around.  But if you just have a very small amount of features, you can focus on these, and knock ’em out the park.  So you have to simplify the idea.  Find out what your app’s nitch is, and then try to focus only on that.

For example, back to our Instagram example.  Maybe you want to allow users to post videos, and audio, and make a lot of edits to their images.  And then you want people to be able to save certain images as favorites, and have facial recognition to be able to tell if any of your Instagram friends are in the image, etc, etc, etc.

Now that may sound awesome, but if you try and do all that, you’ll spend a lot of money and time on a product that you don’t even know if it’s going to do well or not.  Save those features for later when your product is very popular, and you can implement them one at a time.  But for now, just focus on posting images, commenting, and liking those images.

Step 4 – Wireframes, Blueprints & Mockups

You’re probably very anxious to start developing this thing as soon as you get a developer.  But you want to hold off on that and get some wireframes and mockups first.  Wireframes basically are the skeleton of the application.  Where will buttons, text boxes, labels, icons, images be placed etc.  Wireframes typically are in greyscale because you still haven’t decided on all you want graphically.  But a wireframe will give you what the overall product layout will be.  After you do the wireframes, you draw out a blueprint.  This blueprint contains everything that has to do with the User Experience.  Explaining what each button does, and how all screens work together.  Here’s a sample of a beautiful blueprint from fueled.com.

Fueled Blueprint

Fueled Blueprint

After you’ve done the Blueprint, you do the mockups.  The mockups are the images of the way different screens will actually look within the application.  By the end of the mockups, basically you know exactly what the app will look like.  Here’s another example from fueled.com.

Elevatr app by Fueled Mockups.

Elevatr app by Fueled Mockups.

Once you have the mockups you’re ready to develop right? Almost, but no.  Now you need to polish the application.  Polishing the application is the final touch that only some designers/developers will do.  Here we perfect the design, and make sure that it contains all the animations, and transitions perfectly as desired.  This is the step that people who truly value their craft will take.  This is the step that will take your app from, ‘ooh’, to ‘aaaaahhhh’, and take you from the path of common men, to the roads of kings.  From a good app of our time, to a product of legend.  Yes, this is the step of all steps!

Honestly though, this is important, because it puts you right above the competition, because most people don’t do this.  Check out this video to see how fueled does it.  http://vimeo.com/60231954

Step 5 – Develop it

Now, develop the application.  You’ve got everything decided, now you simply implement.  Either do this yourself, or get someone else, but you should have already decided that by now.

Step 6 – Test and Make revisions

Great apps have been thoroughly tested.  So make sure that you test as much as possible, and with as many people as possible.  Give it to old people, young people, programmers, artists, fast food workers, bank tellers, CEO’s.  Everyone will use your app, so everyone needs to test it to make sure that it’s good.  Keep making revisions and testing until you have a GREAT product.

Step 7 – Market and Ship

After all that hard work, now comes the time you’ve been waiting for.  Ship that beast!  Push it to whatever stores it needs to go to.  Now notice though, I put market first.  That’s because you should start getting the word out there before the product is shipped.  That’s because you want people to be kind of expecting it, that way you won’t lose momentum once it’s live.  There’s a ton of ways to market your product, look here for some advice.

And viola, you have now taken your product from nothing, to something!

Using jQuery Datatables with NodeJS and MongoDb using mongoose-datatables

Web Development

So what exactly is this long name all about?  Well let’s just dive right into it. jQuery Datatable is an awesome tool to use as a table for your website.  It offers some nice features right off the bat such as sorting, and searching mechanisms.  So using it can save you a lot of development time. I realized rather quickly though when implementing this tool in my website that using the jQuery datatable with Node and MongoDb was a little difficult, mainly because of the lack of documentation.  That’s why I decided to write a blog post about how to create a datatable with NodeJS as the server, and MongoDb as the back end database.  Keep in mind, there are a lot of details that I will not go into that have to do with NodeJS.  So if you’re unfamiliar with Node you may want to look into it first.   So here we go! So we’re going to have four files.

  • index.html – The web page itself
  • mongo.js – This will handle all our database manipulations using mongoose
  • node.js – This will be where we write our Node server
  • main.js – This is where we handle all the client side javascript.

The example that I have here is using a document that I created entitled reservations with four fields.  The Json looks like this.

reservation : {
   name : String,
   startDate : String,
   endDate : String,
   confirmationCode : String
}

The first thing you need to do is create a table with the columns already specified.  This is an example of what you can do.  Keep in mind though that this table will not be too pretty, I’m not showing any fancy design with this.

index.html

<!--We need these two js files included. You need jquery 1.7.2 because for some reason the newer versions have issues with datatables. The second will be the js file for the datatable itself.-->
<script type="text/javascript" src="path/to/1.7.2.jquery.min.js"></script>
<script type="text/javascript" src="path/to/jquery.dataTables.js"></script>
<table id="example" cellpadding="0" cellspacing="0" border="0" >
<thead>
  <tr>
    <th>Name</th>
    <th>Start Date</th>
    <th>End Date</th>
    <th>Confirmation #</th>
  </tr>
 </thead>
 <tbody>
   <tr></tr>
 </tbody>
</table>

So this is just a simple table, with column names:

  • Name
  • Start Date
  • End Date
  • Confirmation #

Now here’s what you need in your Node Javascript file.  I always name mine node.js.

node.js

function start ()
 {
   var http = require("http");
   var fs = require("fs");
   var express = require('express');
   var app = express();
   var mongo = require("./mongo"); 
   app.configure(function () {
     app.use(express.bodyParser());
     app.use(app.router); app.all('/', function(req, res, next) {
       res.header("Access-Control-Allow-Origin", "*");
       res.header("Access-Control-Allow-Headers", "Content-Type");
       next();
     });
  }); 

  app.get('/mongo/get/datatable', mongo.getDataForDataTable) //Here's the line that we're looking at specifically
  app.use(express.static(__dirname));
  app.listen(process.env.PORT || 8080);
}; 

exports.start = start;

Here’s the line that we really need to look at.

app.get('/mongo/get/datatable', mongo.getDataForDataTable)

So here is our GET request. What this line does, if you’re not really familiar with Node, is it will route a GET request to the method getDataForDataTable in my mongo.js file. Now lets move onto our mongo.js file.

mongo.js

First off, you want these variables to be global.

var mongoose = require('mongoose');
var DataTable = require('mongoose-datatable');
var MyModel;

Configuring is optional, but if you do, make sure you configure the datatable and initialize it on start up.

DataTable.configure({ verbose: false, debug : false });
mongoose.plugin(DataTable.init); var dbURI = 'mongodb://localhost/test';
mongoose.connect(dbURI);

Once again, I set these variables you see below as global, but they don’t have to be, just make sure they can be reached in the db.once method, which we will be writing below.

//Global
var db = mongoose.connection;
var reservations;
var dates; var reservationsSchema;
var dateSchema;

db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function callback ()
{
  console.log('Connection has succesfully opened');
  var Schema = mongoose.Schema;
  reservationsSchema = new Schema(
  {
    reservation :
    {
       name : String,
       startDate : String,
       endDate : String,
       confirmationCode : String
    }
 });
 reservations = mongoose.model('reservations', reservationsSchema);
 MyModel = require('mongoose').model('reservations');
});

So here what we’re doing is creating the Schema (reservationsSchema) which is necessary in order to create the model (MyModel) object. The following line retrieves the model.

reservations = mongoose.model('reservations', reservationsSchema);

And in the line below we set the model MyModel, which will be using later.

MyModel = require('mongoose').model('reservations');

So so far we’ve:

  1. Created a small table with the columns specified.
  2. Wrote a router which will route our get request to the proper method in the mongo.js file.
  3. Created our model and schema which both are necessary in order to retrieve the documents from the Mongo database.

Now here is our code to get the data from the Mongo database.

exports.getDataForDataTable = function getData (request, response) {
  //"type.typeName" : "Trolley"
  //console.log("Get Request for Data Table made with data: ", request.query);
  MyModel.dataTable(request.query, function (err, data) {
    response.send(data);
  });
};

So what did I just do? We

  1. Called the dataTable method on the MyModel object, and sent request.query (JSON) as the query for what data we want to receive.  For now, we aren’t going to mess with that query at all, so that will be the default setting.
  2. Returned the data object which contains our documents that we just searched for.

And here’s the final part of our code.

$('#reservationTable').dataTable({
  "bProcessing" : true,
  "bServerSide" : true,
  "sAjaxSource" : '/mongo/get/datatable',
  "aoColumns" : [
    { "mData" : "reservation.name" },
    { "mData" : "reservation.startDate" },
    { "mData" : "reservation.endDate" },
    { "mData" : "reservation.confirmationCode" }
  ]
});

So here’s what we got going on.

  1. bProcessing” : “true” – Enable or disable the display of a ‘processing’ indicator when the table is being processed (e.g. a sort). This is particularly useful for tables with large amounts of data where it can take a noticeable amount of time to sort the entries.
  2. bServerSide” : “true” – Configure DataTables to use server-side processing. Note that the sAjaxSource parameter must also be given in order to give DataTables a source to obtain the required data for each draw.
  3. sAjaxSource” – This is the address of our GET request.
  4. aoColumns” – Used to give DataTables specific instructions for each individual column.
  5. mData” – This property can be used to read data from any JSON data source property, including deeply nested objects / properties.

So basically what I’m doing here is setting the table up to show when it’s processing data, also telling it that we’re going to be doing server side processing, and that the GET request address is /mongo/get/datatable.  Then I’m saying that the column data is going to be taken from the response to the GET request, and we want from the returned JSON, reservation.name, reservation.startDate, reservation.endDate and reservation.confirmationCode. And that’s it, if you run the website now on the server you’ve created, you will see that it’s populated with data.

3 Tips for Simple, Elegant, iOS Design

Uncategorized

As an iOS Developer, you fully one understand one absolutely essential aspect of marketing.

“The apps that are beautiful…sale!!”

The thing is though, not everyone has a limitless supply of funds to pay designers.  And not everyone knows a designer who if you pay him, will actually deliver a quality product.  So the question is, how do you make sure that you’re design is one that will make the end user go…wow!  I’ve put together three simple tips and principles to think about when designing.  In the future, I’ll add more.  Hopefully this will help you in your endeavor of creating beautiful UIs.  At the end of each tip, I’ll show you an example of what I mean for each tip.

Tip 1 – “Imitation is the greatest form of flattery”

It is a fundamental truth that there are many apps out there that are stunningly gorgeous.  When you are going to create an app, why not look at some designs of others.  Here is what I do.

  1. I do a search on the app store for an app similar to the one that I’m about to make.
  2. Then I look at the first say 20 of them, and I narrow it down to about 3 that I find most beautiful.
  3. Then I just analyze the three apps and try to determine what makes them so elegant.
  4. Then I read the reviews and see what others are saying about them.   (Customers know what they want and they’ll be honest if they want to see something different.)
  5. After all this, I generally have an idea of what I want, and I begin my mock up.

The great thing about this system is that you have an idea of what others have already done that worked and that did not work.  Also, I find it easier to build something after I’ve seen something that I can kind of build off of.  Now this isn’t copying, it’s simply imitating.  Eventually you’ll be happy that others are imitating your app designs.

So let’s see an example.  Look at the Yahoo Weather.  What makes this so nice?

yahooweatherapp

1)      Beautiful background pictures?

2)      Fonts are easy to see on the pictures because they make sure the images they use have dark areas where there is text?

3)      The icons are very consistent, and very simple?

4)      They utilize Flat UI?

5)      The font selections are perfect?

So then you would strive to imitate this screen, of course not an exact replica, but strive to use beautiful background pictures with well-placed fonts with good font selections, and Flat UI.

Tip 2 – “Keep it simple Socrates”

“Wisdom is with the modest one.”  What does that mean?  It means you have to understand your limitations.  If you’re not a graphics designer, don’t try to make some epic design with all kinds of rotating images and parallax scrolling, with particle affects.  All that’s going to happen is you’re going to have a jumbled up bunch of nonsense.  Instead, focus on simplicity.  Instead of having 20 things on the screen that are all kind of just thrown together, have 3 things done beautifully.   A good example of this is an app made by Fueled called Elevatr.  Look at the app screenshots below.

elevatr

Do you notice how simple the first screen shot is?  There’s nothing fancy at all about this.  It’s simply a static picture with some text, but it does its job.  The second screenshot, is extremely elegant but simple, it’s simply just a table with some text.

Look at the 3rd screenshot.  What makes this screen so elegant?  Notice the user of colors makes the app very pleasing to the eye.  The way they have the information compressed in the boxes, and when you want to view all the information you SIMPLY click on the plus sign.

Now what makes all this so nice though, it’s well thought out colors, a well thought out image, and well thought out font selections and locations.  That’s it!!  Nothing fancy!!

Now ask yourself.  Could I do this?

The answer is an emphatic YES!!!

That’s what makes this so awesome.  It’s not overly complicated.   Simplicity is often better then complexity.

Tip 3 – “What we see depends mainly on what we look for.”

If you want to have good designs, it is very important that you keep your eyes open for good designs in everything that you see.   What do I mean by that?  Well, it’s interesting how everything that we see, really has some sort of design, you just need to keep your eye open for it.  For example, when I went to CES in 2014, I was taking pictures of everything from cars to the carpet selection.  Why?  Because hidden there was design.

mustang

Look at this picture of a mustang interior.  Now, this looks like a beautiful interior, right?  Why not use these colors for a color scheme of an app?  Metallic silver, yellow, black, with maybe some ribbons of red and white.  You’d be amazed at how something like that could look!

Do you get the idea?  Use designs that you may have not thought of to give you ideas for an app.

So these are just a few tips that I wanted to share to help people to get some killer designs for their apps.  If anyone has any good links to their own designs, or to some cool tips, just leave a link or something in the comment.  Hope that this helps everyone who reads it.