Wireframe Survey

Creating wireframes is an effective way to kick off a development project and get a quick outline of its intended layout and functionality. Many developers know this by now, but exactly how many? In order to get an answer, we conducted a survey and asked 501 software developers the following question:

Have you ever heard of wireframes as a way to plan the layout of a user interface?

The Survey Results

Out of 501 respondents, 61.3% said they had never heard of wireframes.

Wireframe Survey: Results (Total)

Interesting to note is that more men than women responded that they were familiar with wireframes.

Wireframe Survey: Results (By Gender)

When the survey results are broken down by age, it becomes apparent that developers between the ages of 25 and 44 are more likely to know what wireframes are than developers in other age groups.

Wireframe Survey: Results (By Age)

How the Survey Was Conducted

We used Google Consumer Surveys to conduct the wireframe survey. The following screening question made sure that only participants with experience in software development were considered:

Do you have experience in software development?

According to Google, the survey results were obtained for a representative sample of the U.S. population. Those interested in the raw data can download the results in Excel CSV format here.

Conclusion

The survey revealed that the majority of developers is unaware of wireframing as part of the software and web development process. This will probably change in the next few years as wireframes increasingly find their way into university courses and gain acceptance in the developer community.

If you are new to wireframes and need a software tool to get started, take a look at PowerMockup, a wireframing add-on for Microsoft PowerPoint.




Rapid Prototyping of User Interfaces with PowerMockup

Rapid Prototyping

Rapid prototyping means quickly producing and evaluating working models (prototypes) of a software system before starting actual development. The rapid prototyping process consists of quick rounds of the following three steps:

  • Prototype: Build a model that targets a specific aspect of the system
  • Test: Validate the prototype against the requirements
  • Refine: Identify how to tweak or revamp the prototype based on testing results

The above steps are repeated until an acceptable solution is found.

User Interface Prototyping

When developing a desktop or web-based application, user interface (UI) prototypes can do a great job of testing if the proposed solution actually meets the requirements of the end users. A UI prototype clearly illustrates the functionality and usability to expect from an application and thus provokes feedback and discussion. In the prototyping phase, changes are easy and fast; later on they will be painful and costly. “Fail often, fail fast” is the mantra here.

Toolset for Rapid UI Prototyping

A great tool for quickly creating and refining UI prototypes is PowerMockup. PowerMockup is not a programming utility; it’s more like a drawing program that lets the user sketch the screens of an application in the form of wireframes. It provides numerous UI stencils for buttons, headers, tables, and so on that make it a breeze to prototype and validate different design ideas.




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