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?
Out of 501 respondents, 61.3% said they had never heard of wireframes.
Interesting to note is that more men than women responded that they were familiar with wireframes.
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.
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.
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 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:
The above steps are repeated until an acceptable solution is found.
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.
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.
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.
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.
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.
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:
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!
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.
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.
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.