Building Better Web Applications – Wireframe and User Interface Design

The explosion in smartphones and tablets has, naturally, led to a segmentation of web browsing across devices and form factors. At the turn of the millennium browsing was mostly done on desktop computers or laptops. According to Morgan Stanley analysts mobile web browsing will eclipse desktop web browsing as early as 2015. For many businesses a web presence is crucial, and this ranges from websites to specialized smartphone or tablet apps. For a lot of businesses big or small the web app could be the crux of the enterprise. Whatever the case may be developers and user interface designers have to meet particular needs. According to Smashing Magazine there are three important things to keep in mind throughout the development process, from conception to the creation of wireframes to the final UI design.

• Focus on user tasks and not features.
• Don't try to solve everything.
• Ask the right questions early on.

Focus on User Tasks, Not Features With the Help of Wireframe Software

It is much too easy for developers and user interface designers to focus on the features needed. The problem with this approach is that emphasis is given to functionality and the technology, thus relegating users to the bench. An unintended consequence of this is a user experience that can be frustrating even though all the desired functionality might be included in the user interface design... somewhere! A user centered design approach is key in the development and user interface design of an app that scores high in usability. Usability testing conducted on wireframes of a web app early in the development process can yield solid data on how users actually go about accomplishing tasks. This in turn allows developers and UI designers to craft tailor made solutions that speak to the customer directly. A number of wireframe software today allow for the quick creation of clickable wireframes that can precisely replicate use cases the web app might entail. Some online wireframe tools even allow one to conduct remote usability testing on clickable wireframes, further lowering the barrier to conducting priceless usability testing.

Don't Try to Solve or Implement Everything into a User Interface Design

Another problem focusing on features is that it can be very easy to simply keep adding more and more on the list. This can happen naturally as, say, a small team creates clickable wireframes of the web app with a great user interface design. Upon unveiling the wireframe to other project stakeholders their supportive reaction could be to suggest “neat” features to add. Furthermore these suggestions could even come from higher up in the hierarchy. However good these suggestions may be there is only so much you can incorporate into a user interface design, particularly if the web app is to be used on a smartphone. Simplicity is the key, less is often more and user feedback coupled with analytics can help justify what to include or vice versa.

Ask the Right UI Design Questions Early On

As Donald Rumsfeld once mentioned there are the known unknowns and unknown unknowns lurking out there in this world of ours. When developing a web app there are always going to be surprises down the road simply because one can't anticipate everything. The best way to deal with this is ask the right questions at the very beginning of the development process. Who will be using this web app? Under what conditions? Will they be at work? Or will they be at home relaxing? What frame of mind will they be when using the web app? How much would they be willing to spend on the service? Answering questions like these then allow you to create user profiles known as Personas which provide invaluable market research and insight. Another way of looking at this is as laying a solid foundation to then start building on top of.