This blog post by Ben Gremillion offers some practical advice on how to take a different approach to this problem we consistently face.

I have some practical advice to add in addition to that article…there is no “perfect” photo, image, illustration or otherwise.  Avoid as the article puts it, the “paralysis” of the perfect image search and follow a logical path to the selection…and, don’t forget, you can change anytime and as often as you need to if you feel the one you select isn’t achieving the desired outcome.  We’ve seen it happen often where that quest for perfection results in delays and wasted opportunities when a perfectly valid solution was available from the start.

You’d think that stance would protect us at least partially from things going bad…it rarely does when things do go down that wrong path from time to time.  The reason for this post today, was this thoroughly entertaining piece posted on the “The Oatmeal” site.  As I read this, I knew how the designers here at MARSWorks felt on many projects when their proposed designs turned from what they were proud of in the beginning, to something they wished they had never been a part of when the site or application launched.  While there really isn’t anything funny when it happens, our entire team enjoyed this creative and entertaining piece that is amazingly consistent with many of our experiences. (and to those existing clients who are reading this, you know who you are! )

I think over the years many companies like ours follow similar paths and become more and more able to diagnose “the wrong path” and can be more confident in their objections to a client’s bad choices.  However, being the diplomatic people that we are, I think that the answer is sometimes a balance between what you think is right and the client’s often more knowledgeable position on their clients and what will help them succeed.  The trick, as always, is to make sure that the true users of the website or application are the ones that all involved are primarily concerned with…hopefully that leads to better decision making on design and production in the long run.

So…what makes a drop down “MEGA”? According to Jacob Neilsen, a Mega Drop Downs are:

• Big, two-dimensional panels divided into groups of navigation options
• Navigation choices structured through layout, typography, and (sometimes) icons
• Everything visible at once — no scrolling
• Vertical or horizontal form factors when activated from top navigation bars; when activated from left-hand navigation, they might appear as mega fly-outs (not shown). 

The iPhone already has some multitouch capabilities that allow you to zoom on maps and images simply by placing your fingers on the screen and spreading or closing them.  While Surface seems to extend far beyond that in its applications, it will be interesting to see if some of these abilities can make it into websites and web applications in the near future.

While there have been some very impressive enhancements in web and application development that have seen major advances in interactivity and information sharing, not to mention ease of use for users…I still believe that using computers effectively is often out of the reach of many consumers today who simply don’t have the basic skills and understanding to operate computers…or who never truly seem to learn concepts and skills and are continually frustrated or unable to perform the functions they need to perform.

I hope that this is one of those advances that can truly make the interface of common programs and applications easier to use and more powerful.

I remember watching the first 3D movies when I was a kid with those crazy glasses you picked up at the local convenience store (this was pretty weak and barely worked for me).  Then watching Jaws in 3D was also a neat experience as are the multitude of 3D videos and exhibits and theme parks and museums.

I’m really interested to see how this works on the weekend and what people think of the NFL in 3D.  In reality, TV has become slightly more interactive and picture quality has definitely taken a leap forward with the advent of High Definition Programming, but essentially I still look at the same old box (well flat-panel now) on the wall showing the same old two dimensional output.

On websites, we’ve tried for years to incorporate designs and interactivity that is more 3D…yet are always challenged by the fact that we have to make these designs and systems work on the good old 2D flat screen.  I wonder how far away we are from websites and web applications that have a bit more depth?  Will we shed the confines of the flat 2D screen anytime soon?

It looks like there are already some examples of real-world implementations of this as you can see here:

So why create prototypes? The answer is obvious from the developer’s viewpoint – we want to give our client the best possible shot at seeing the finished product without have to invest all of the time required to build the finished product. Rework and rethinking at this stage is far less costly then later on in the process. For the client or prospective audience, they get to see the web application long before it actually works which can provide them a look at what is to come, and hopefully ensure that all of the required information and thoughts are taken into account as early as possible.

So how do we create prototypes? I think we can throw out the scribbles on a cocktail napkin method, although hand-drawn sketches when done correctly can be an important part of the process for the designer.

The biggest hurdle we seem to face is the idea that either prototypes are not usable (Photoshop, Visio or other drawing tool) or, they are done so rapidly in HTML and CSS that they are essentially throw-away because they are not built properly or in a fashion that makes them easy to build upon.

Photoshop designs are great for presenting a visual medium like the web for many reasons:

• Visual designers excel with this software allowing them to create great looking designs and interfaces with their drawing tools
• The visual design need not worry about coding, something designers are generally not very good at
• The visual quality of the output is excellent

They are also bad for many reasons:

• Somebody has to code them eventually, hopefully the designer drew up something that can be coded using some form of standards based code that doesn’t take ten times as long as it should
• Maintenance can be a huge challenge, changes to these things can be very time consuming as the designer has to drag and slide around multiple controls that they have drawn
• You can’t use a Photoshop file or the image produced from it in the application sense, so interactivity is basically zero
• Text in Photoshop is visually perfect, and depending on the browser and platform, the text on the web generally isn’t visually as perfect or spaced the same

Some of the negative elements are taken from this post, from an organization that doesn’t bother creating Photoshop mockups and simply goes straight to HTML. Although some are advocates of bypassing the Photoshop route, it does have its place in applications that are highly visual and don’t have a multitide of screens and layers that would make it nearly impossible to see a productivity gain by using this method. In cases where the application is perhaps larger in scope, more technical and not needing individual visual attention to a great detail on every page, going straight to HTML can really save time.

Other benefits of the HTML prototyping approach include (as noted in this post):

• it looks just like the finished product…because it is!
• clients and prospective users can actually interact with it – not necessarily to the full level of functionality, but buttons, menus and links can be clicked and used
• there are no surprises when making the conversion from the visual prototype as sometimes happens when the client sees that beautiful Photoshop output and then is dismayed at the reduction in visual quality and appearance of the final HTML product

Creating HTML prototypes is not without its challenges. One needs to be a knowledgable HTML and CSS developer and may need an understanding of JavaScript or an appropriate library. In addition, this individual needs to have visual and interface design experience. This individual is not easy to find and is a great asset to companies like ours.

No matter what the approach or the exact method used, Prototyping websites and web applications is an important step in ensuring that a project is on the right track and that issues are caught as early in the process as possible. Seeing the end result early provides valuable insight for both clients and developers so they can reach the end as quickly and efficiently as possible.