Documenting Functional Requirements with Wireframes

Functional Requirements

Functional requirements describe what software does, whereas non-functional requirements capture the quality and constraints of the software (such as performance, security or fault-tolerance). For example, “Provide the user with a line chart of monthly sales” is a functional requirement. Providing the chart in less than one second, on the other hand, is a non-functional requirement.

Functional requirements are often gathered through interviews with clients/end users and written down in text format. This typically results in long and dry documents that are practically impossible to review and comprehend.

Bring Your Concepts to Life

A fresh and lightweight approach to documenting and discussing functional requirements are “wireframes.” Wireframes are rough illustrations of an application’s user interface. Much like blueprints for a house, wireframes provide layout and navigation structures, without getting into design details like colors or font types. They allow all stakeholders to focus on what the application does, not what it looks like.

A Picture is Worth a Thousand Words

The most important strength of a wireframe is that it makes abstract concepts tangible. A wireframe model of the application’s screens allows everyone to grasp how the application will work and if there’s something missing or incorrect in the design. Users are much more likely to comment on a sketched user interface than on a textual description of a use case. This makes wireframes great communication tools that facilitate discussion between developers and business users – even, or especially, during workshops.

A Good Tool is Half the Job

Although it’s possible to sketch wireframes with nothing more than a sheet of paper and a pencil, using a dedicated wireframing tool like PowerMockup has some significant benefits:

  • It provides a rich set of user interface elements that can easily be added to a wireframe
  • Wireframe designs can be saved and archived
  • It’s easy to exchange wireframes with clients and co-workers

PowerMockup builds on top of PowerPoint, which makes it very easy to use, even for non-technical individuals. Feel free to give PowerMockup a try and download the free trial version. You and your clients will love it!




Creating User Interface Specifications with PowerMockup

The Where and What, Not the Why or How

A user interface (UI) specification defines how a user interacts with an application while ignoring implementation-specific details and background functions not visible to the user. It answers questions such as: “How do I find a patient record?” “How do I display search results?” “What will happen after clicking the ‘Cancel Order’ button?” It doesn’t detail, however, which protocol is used for retrieving data from a server. Simply put, a UI specification describes the where and what of an application, not the why or how.

Forget Writing Lengthy Specs: Nobody Will Read

While typical user interface specifications are in text format, this may not be the best way to document UI requirements. Nobody likes reading dry, lengthy documents with hundreds of case descriptions. An alternative that makes abstract concepts more tangible are wireframe diagrams. Wireframes use simple line drawings to depict how an application will look and work. They give all stakeholders (clients, designers, managers, developers, etc.) some building blocks to work with and thus encourage discussion and input.

PowerMockup: A Tool for Specifying User Interfaces

The most efficient way to create a wireframe is to use a tool like PowerMockup. PowerMockup provides a rich set of UI elements that can be easily assembled to sketch a comprehensive user interface. As PowerMockup builds on Microsoft PowerPoint, it’s extremely easy to use and integrates perfectly with the Microsoft Office ecosystem. Using PowerPoint’s presentation features, it’s even possible to create interactive wireframes that can act as simple working prototypes.

Blog Categories