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.
Among the radical changes in the recent world is the impact of mobile devices on modern society. Quickly becoming the first screen of information for everyone, mobile apps are even being used by the electronically resistant senior population who has found convenient use of large-print apps and the ability to maintain closer contact with grandchildren. We have seen such a great shift in the past five years so that even the shortest elevator ride has people pulling out their phones to manage their lives. This poses opportunity, as well as, challenges for businesses trying to stay ahead of the pack.
Big business has been the first mover with custom mobile apps that segment services to their simplest form. With a few clicks on an iPhone, anyone can re-order medication, purchase movie tickets, or find their way using GPS technology. To the small businessman, mobile apps are still something to put-off developing because it adds to the development budget, and they resort to mobile friendly sites that only require one build. This means developing web apps with a width of less than 960 px and reducing the number of pages that display on mobile devices. A true mobile app requires additional development dollars, but is native to the mobile device, even using geo location sensors and maps.
There are also more challenges involved with mobile apps because, just as web applications must function in multiple browsers, mobile apps must also function in multiple mobile frameworks (iPhone, Android, etc.), adding to the burden and cost of development. For all the trouble, most small businesses throw in the towel applying their efforts in things they understand.
Developers should be paying attention because they can use their existing development team without the need to find or create mobile specialists. It also allows the ability to incorporate sensors, like geo location and cameras, which are native to the mobile environment.
Small business will love this because it simplifies their development strategy and gives them wider access to their customers. It makes mobile development affordable for everyone and could very well equalize the playing field between big and small business. For this reason, we are paying close attention to PhoneGap and hope to add it to our list of services very soon.
The well-known Dreamcakes bakery nestled right in the heart of Homewood, AL has launched a new website that captures the personality of the quaint shop to perfection. New features are sure to suit the needs of each and every loyal customer, as well as, the needs of those visiting the site for the very first time.
Our Whiteboard-IT team collaborated to give the new Dreamcakes website a dainty and vintage feel, while every aspect of what the bakery prides itself on is on full display. Each cupcake is individually highlighted on the “All Flavors” menu and daily selections are also ready to be shopped from the “This Month” menu. Social media integration allows viewers to “Like” their favorites, comment on any of the 80 cupcakes, and choose the flavor of their next Dreamcakes visit based off of what others are saying…or just off what sounds good from the decadent descriptions of each.
The new site features a whole page devoted to the Dreamcakes cupcake truck with a Twitter feed sidebar so visitors will always know where they can enjoy a Dreamcakes cupcake around town, an events calendar with monthly view and easy registration, and cake and cupcakes gallery to show off some of their best work. Pages describing each of Dreamcakes’s sugary delights are also featured in the main navigation bar.
This brand new site showcases sweetness in its purest form. No sugar-coating here! Just treats baked to perfection and so elegantly displayed that you’ll want a cupcake, no matter what time of day it is!
In the past, developing web applications meant using SQL. For those relying on relational data, this was no problem. But for those with massive amounts of data, this was like steering a barge – a bulky solution, creating drag-on queries when the intended goal was speed and availability. As Whiteboard looks at the architecture of a site, we have many options from which to choose.
With the oppression of limited Databases came a rebellion, and with that rebellion came a movement. In this case, the NoSQL movement, which arrived with a myriad of motivated programmers caused a pendulum swung that cranked out new opportunities…most of them open-source.
Those opportunities have clever names, and were created by a host of wild enthusiasts to handle a huge quantity of data, especially when the data’s nature does not require a relational model. They are Mongo, Cassandra, Riak, Redis, Couch and Neo4J to name a few.
Cassandra (Apache Cassandra), for example, is a NoSQL solution that was initially developed by the people of Facebook as a hybrid database management system that allows for tunable consistency goals. This means that a query may provide different results from different angles, but it is widely available to users – and fast.
Which brings us to CAP Theorem:
In computer science, the CAP Theorem says that it is impossible for a distributed computer system to achieve these three guarantees at once:
A. Consistency (C) – all nodes and queries see the exact same data at the same time.
B. Availability (A)– 100% uptime.
C. Partition tolerance (P) – the system keeps going even when message loss occurs in part of the system.
To try all three would be like placing child seats in a race car, which of course is built for speed, not a daily shopping trip. To try, you would need to dial down your speed, therefore defeating the purpose of having a race car.
Cap Theorem suggests that to gain A, one may need to sacrifice C. To gain C, one may need to sacrifice A and so on…
- SQL allows C and P, but decreases A.
- Riak focuses on C
- Mongo gives A and P while, some say, decreases C.
These are debatable assertions, and often dependent on the programmer who is turning the knobs. But even Birmingham’s own MongoDB claims weakness, as its focus is on flexibility, power, speed, and ease of use, while sometimes sacrificing “fine-grained control and tuning, and overly powerful functionality.” Still, it is the rock star of the NoSQL movement and is now being used by SquareSpace, Craig’s List and MTV.
We often use CouchDB, at Whiteboard-IT. Jacob Kaplan-Moss, author of “The Definitive Guide to Django,” claimed here,“Django may be built for the Web, but CouchDB is built of the Web.” As the web is our native environment, CouchDB is the most natural tool for us to use.
The NoSQL movement is has great momentum, though it has earlier roots. Lotus Notes, for example, was forced to write their own database in 1985, which they called NSF (Notes Storage File). Founding member and former CEO, Tim Halvorsen was NoSQL when NoSQL wasn’t cool. He says,
“…we created it from scratch. At the time, I looked at some of the databases out there (e.g. dBase, etc), and they were all too limited for what we needed. So, we wrote our own. Its a “document database”, not a relational database, with each “document” (aka record) having a variable number of fields. No schema – each record was self-contained, but they could also be indexed (which any database must be capable of).”
History was made and even CouchDB is based on the work accomplished by Lotus Notes.
So – there are many options from which to choose, and if your web designer goes to SQL straight away, it might give reason to ask if others have been considered. Depending on your requirements, you may have another need…the need for speed.
For the best lessons in Web Development, sometimes we don’t need to look further than the lessons we learned in kindergarten. We have found that one of the best tools to communicate between developer and customer is a simple pen and a few pieces of paper.
A crucial part in the development and design of websites and applications is communication. Communication of ideas, concepts, design and user experience between the developers and clients increases the likelihood of satisfaction for the client and a quality product. Frequent demonstrations of working software can keep the project moving and focused in the right direction. Yet it can sometime be hard to narrow down exactly what the client wants for their site or application. Most projects start with a general idea and become more focused as the project moves along. Clients don’t realize what it is they prefer in terms of design and functionality until they see the working software. This development method is called Agile Development and is very flexible and adaptive to constant changes. However, it’s most effective when the project has a basis/example from which to work towards. Think “like Facebook for [insert x]” or “similar to gmail.” But what if the idea is one of simple parameters and functions but no clearly defined user interface or implementation? That is where Paper Prototyping has value.
Instead of working software to demonstrate after a week of development, Paper Prototyping is utilized at the beginning of a development cycle. This method asks the client to act as the user while the developers “drive” them through the interface. However, it’s not software that is used, instead it’s common paper items found in every office. Sometimes it’s as simple as a white piece of paper with a drawing of the website’s look. The best and more effective kinds use folders, note cards, note pads, and post-it notes to represent different functions on the page. To show you what I mean, let’s look at some prototyping for a site that might want to implement a User Management feature.
Most sites today have users create some form of account or profile. If you are looking to design a site with this function, maybe you don’t know exactly how it should look or what functions should be available. For this example, we’ll use a site who’s company is looking to sell products and or services. Let’s start with a mock-up of the homepage:
It’s a white piece of paper with a “To-Do List” paper note as the profile sign-in. On the left hand side or two sticky notes used to represent possible functions or features on the page. These features may have been explicitly stated by the client, but in the case where it’s not, they are easily changeable. Case in point, you can quickly demonstrate what the user would see if they had an invalid login.
Quick and Easy. As the user, you are asked to then make a selection by the developer. So let’s say your goal is to attract new users. One thing they will all have in common is to fill out information on a “Subscribe” page. So, the user clicks the “Sign-up/Subscribe” button (indicated in green writing in the picture above) and the current page is taken away and the “subscribe” page is presented.
All we have here is a manilla folder with some notes pages and writing in pen. The value comes from being able to demonstrate clearly what the page looks like and answer questions such as: Is this function useful? Could we make this better? Do we want to expand on this? Should more data be provided during this process? Is it simple and easy to understand?
Those types of questions usually get answered later in the development process. Lots of times its for no other reason than the client “hadn’t thought about that”. We are web-developers and, more to the point, we are the guides for clients to get into the expansive world of possibilities known as the internet. Paper Prototyping allows everyone involved to start on the most direct path toward the final product.
Go to Part 2 where we use Paper Prototyping to demonstrate standard user management features for existing profiles.