Courtesy of: http://bruceclay.com
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.
This week’s employee spotlight. Meet Justin Missanelli; our Whiteboard Hero of the week.
Whiteboard-IT is currently seeking a C# ASP.NET Developer with education and experience in all related fields. Looking for ASP.NET and open source experience. C# and jQuery knowledge desired. We are looking for a creative and motivated individual who can produce high-quality work and can meet deadlines.
- Minimum 2 years experience (employment or curriculum) in a related field
- Working knowledge of HTML5 and CSS3
- User experience, user interaction, and information architecture best practices
- Study of current web design trends and creative ability to execute compositions of such
- Good communication skills with team work and client interaction
- Some Sharepoint Exposure Desired.
- Github or BitBucket or equivalent account required for application
Salary commensurate with qualifications and experience. To apply, please complete the application form and email it AND a resume to firstname.lastname@example.org. All out of town applicants must be willing to relocate at their own expense.
Proactive chat is a great way to increase website conversions. The majority of internet users have used chat clients, so a proactive chat client will feel familiar to these users. There is no excuse, start a conversation with your customers on your website today.
Are you wondering why you are hearing from such a low percentage your visitors? It may be because of a poor conversion path. Are you using a contact form? Even with the best contact form, customers worry about being added to yet another mailing list. Internet users are wary of giving out their email addresses for good reason.
How likely would you be to interact with a sales clerk in a store if you had to provide him or her with your drivers license?
Your customers are one click away from your competitors. You must engage them while you have their attention! So how do we overcome the understandable reluctance of customers to give out their email addresses?
So what we needed was a solution which allowed us to communicate with customers without having to collect any personal data. Proactive chat solves this problem by offering the visitor a chance to interact with one of our employees. If the customer does not want to chat, he or she does not have to and can simply ignore the chat box.
On our site, after 20 seconds idle on a page, a chat box pops up. If the customer types in the chat box, one of four designated representatives receives the message and is able to personally assist the customer. The chat is configurable. It can be available on any or all pages. You have control.
There are also “passive” benefits to the chat. When planning a marketing strategy, information is priceless. Who buys what? Where are they buying it? How often are they buying? Chat boxes like the one offered by SnapEngage live chat offer a multitude of analytic options. Reporting features that give you valuable statistics about visitors, as well as chat summaries and records will shape your marketing strategy. These features provide data that can be used to increase conversion. A.B.C., Always Be Closing – the more information your sales reps have, the easier this becomes. Integration with existing chat applications such as Skype and AIM make getting started easy. Get your web designer to paste a simple script to your site and you are good go.
Contact us and we’ll be happy to help you get started. In fact you could be chatting with us as you read right now…
The competition in the web browsing market has been ratcheted up a notch with the recent releases of Firefox 4 and Internet Explorer 9, along with Chrome 11 (dev). Everyone has their reasons for picking one over the other. Be it design, simplicity, advanced features, etc. their is no correct way to pick a browser, as long as it’s what you like.
If you are like me, you hate mousing over text that’s hyper-linked and not knowing where said link will take you. I mean sometimes the entire URL is too long and you need a smaller version. Or you might embed it in one word, like the plethora of posts that have links HERE. One of the best things is being able to see the intended URL in the status bar at the bottom left of the browser window. For some reason, Firefox took it away. However, now they’ve brought it back.