The other day, I was discussing with William how the enthusiasm for a new project tempts us to rush into a project with a list of features, rather than stopping to make a Wireframe, a very important step that saves much time and aggravation.
I’ve never heard of a contractor who builds homes without some form of schematic. The borders of the property need to be mapped out, the lines must be drawn, and the project must be visualized before the first hole is dug. Imagine being halfway through a project when you realize the bathroom is on the wrong side of the house. Whoops.
In software development, a wireframe is a very useful tool and can be created with minimal effort on the back of a napkin, but there are also some very good tools out there that give you a more modern representation. These aid in the understanding of information design, navigation design, and interface design. A good wireframing tool lays out all the buttons and menus and lets you click and drag them into place. Easy peasy.
The mere process of sketching out your website helps you add and subtract features to fit the scope of a project by giving priority to the kinds of information that are displayed and the range of functions that will be available. It goes beyond a mere list, which always gets bigger as the project moves forward, and projects that start that way almost always go over time, as well as over-budget.
There are several wireframe tools out there, both free and paid versions (see below). Paid versions are often more mature and have larger list of features. Free versions are generally newer and are working hard past the awkward teenage years in order to become a paid version. Either way, the mere act of creating a wireframe will save you much time, effort, and aggravation.
Just as web applications need good planning, so do Mobile Applications. JQuery Mobile has a fun schematic markup on their homepage that gets you thinking about Mobile Development. They have helped names like Disney and IKEA and allow you to quickly adapt a standard website into a mobile version of your site.
These tools do allow you to upload images to gain a more detailed rendering, but in some ways that defeats the purpose. A black and white representation is often best to grasp work flow and will help you to own the project before you launch development.
Below is a video example from Balsamiq:
Of course this is a good exercise to perform with the developer, but you might even try doing it yourself beforehand. It’s a simple process that won’t take too much time, but will always give you a return, benefiting both you and your developer.
When Apple took the world by storm and created the iPhone, it was the device’s simplicity, rather than its complex list of features, that won the day. In technical terms, we call this elimination of unnecessary state; the process of reducing the list of options to eliminate the clutter.
Apple understood this concept, and made brilliant decisions to reduce features in order to give it the friendly factor. You will notice one button instead of 18, one device instead of exposing their iOS to the open market, one place to download apps and music, the latter of which has given them much control profitability.
Consumers rave about the iPhone’s intuitive and user-friendly nature. The reduction of state and good design is what gave it life, allowing only one application at a time with only one physical button. No confusion. Easy. beautiful.
Programming is the same in many ways, with no fewer temptations to add multiple features.
Look what happens if you add one parameter; You are creating a true condition and a false condition. Then add another parameter. Now you have 2^2 or 4 conditions that you will need to test. Add a third and you are at 8 conditions. In this vein, Windows clearly offered many features and services (internet, phone, contact management) but its first phone, with all its working parts, was a bust.
More features = more working parts = more opportunity for clutter or failure. Complex API’s are necessary. Nowhere does this rule hold truer than when you are dealing with vast amounts of working data. In the end, if it is not simple to read or use, it will collect dust.
I have seen many instances where a new piece of software was installed to solve “every” problem a company was having. The challenge? Such solutions are big and scary and often come with a giant learning curve. This is why Basecamp grew so quickly (it solved one big problem), and why Workamajig, a much more complete system, requires so much effort to sell, train, and install, and why they need a one-year contract to get things going. If people don’t invest in the idea, they will not use it. It’s just too hard.
The world of apps is taking off so successfully for the very same reason. Mobile Apps handle one idea, big or small, at a time. So, if you want your launch to be successful, you may want to do a little elimination of unnecessary state on your own. What big idea do you want to solve?
Technology for MW is improving to a degree that it will soon be undetectable to the user. Hint: Twitter MW is on the left, LinkedIn MW is on the right. How did you do?
Compare the difference of the location of the tool bars; how do they act when you touch them? Which one is faster? Do they have the same number of functions? Will they both allow you to upload a photo?
Boston Globe is another example of a website that has taken a hybrid approach, developing both MW and NA. Their website is very mobile-friendly, adapting screen size extremely well using HTML-5. One way to test this on your screen is to play with the size of your browser while engaging with BostonGlobe.com. The responsive design is quite deliberate and well done.
The big mistake is to force a traditional media strategy into the mobile environment. Companies need to realize that the world, and even the Web itself, have changed and continues to change quickly. One advantage of MW is that it has the potential to adapt quickly and with less impact on your budget. It is no longer the 2nd class citizen of mobile development and could overtake the NA, though Apple’s dominance should not be underestimated. Consumers love the one-stop-shopping in the App Store, where credit card numbers are stored in one place. They also like the one-click icons.
But if you ask, “What should Mobile Web be?” Soon, it can be whatever you want it to be. MW has as many advantages as Native Apps and should be equally considered. My opinion is that developing web apps with the idea of using Cordova to make them native is the most cost effective solution for a customer. It also delivers a good experience in both platforms.