Position Research: Organic Optimization Professionals

SearchEngineOptimization156 (760) 480-8291

Web Application Wireframing

According to the Standish Group in their "2003 Chaos Chronicles Report", about 66% of all software development projects fail or are over budget or time, and/or deliver reduced functionality.  HTML wireframing addresses these issues by allowing application architects to specify critical aspects of the project prior to engineering (coding).

  • Application look-&-feel (fit and form)
  • Nearly full user interface functionality
  • Usability considerations
  • Define web element shape, location and text copy
  • Produce sample (static) results.

Until recently, wireframing web applications consisted of flow diagrams and static representations of screens.  Today’s wireframes expand these features with live HTML web elements that provide near 100% user interface look-&-feel and behavior.  The user interface is tested and refined till all user functionality is optimized.  Then, the application database is designed and detailed specifications produced. 

Coding engineers responsible for the application logic receive clear, concise and complete specifications so they can focus on their core competence – programming. 

Process

The process begins with a discussion of the application.

  • Target user
  • Application purpose
  • Platform preference
  • Input / output
  • Etc.

Physical wireframing begins with a functional flow chart describing the primary application elements.  After approval, live HTML wireframing begins.

Live HTML wireframing covers 3 primary objectives.

 

Form How well each web element looks.  Is it pleasing to the eye?
Fit How well the web elements flow from a usability perspective.  Are elements intuitive?
Function What is the functional specification for each web element?

 

Form and Fit are both covered in the creation of HTML pages that allow stakeholders and perspective users to exercise the wireframe.  Stakeholders may prefer to view each screen with note fields showing web element function.  Perspective users would exercise the user interface without these note icons.

Stakeholders and perspective users critique the wireframe and architects make revisions as necessary.  This process continues until stakeholders are satisfied with Form and Fit.

Armed with the live HTML wireframe, database designers develop a normalized database.  Finally, table / field information is back-filled into the wireframe so engineering specifications are complete.

 

In some cases, the architect can create web templates with web elements for use by the coding engineers.  Otherwise, the coding engineer performs this task.

Conclusion

Live HTML wireframing is intended to streamline the Form, Fit and Function tasks of designing a web application.  Coding engineers receive clear, concise and complete specifications that permit faster development time.

See a sample of a live HTML wireframe here: http://www.positionresearch.com/wireframe/index.html 

 


 Get PDF>>