At my job we put some elements of the design for graphical user interface in both the functional specification and the technical design documents. However, this is often easy as nearly 100% of the time we are making modifications to existing software. What would one do if they wanted to produce a separate document for GUI specification that was for a new software project? I have software that can help me with simple wire frames, but what would a document template outline look like.
What do you use for a template or outline? I was part of a group a few years back that had a very good UI specification process. We created a document that contained:. An overview of the overall UI metaphor (e.g.'
A Software Requirements Specification (SRS) is a document that describes the nature of a project, software or application. In simple words, SRS document is a manual of a project provided it is prepared before you kick-start a project/application. This document is also known by the names SRS report, software document. A user interface specification blends software requirements and design for information-rich pages within an application. The toolkit includes 11 additional templates covering common BA documents, each accompanied with a work sample too. Click here to learn more about the BA Template Toolkit.
Page and Folder', 'Business Card'). Proposed UI elements (e.g. The help buttons including the icons, the styling to be used on pull-down lists, etc.). These all supported the metaphor. Specifications for spacing and justification standards for dialogs (all had 8 pixels or border, buttons below list boxes were always x pixels away, etc.). Font specifications (ours was to be a very stylistically unique project).
I was part of a group a few years back that had a very good UI specification process. We created a document that contained: An overview of the overall UI metaphor (e.g.' Page and Folder', 'Business Card'); Proposed UI elements (e.g. The help buttons including the icons, the styling to be used on pull-down.
We included specs on how to provide 'Help' but this was a bit unusual. Candidate screen mock-ups that incorporated the UI elements and that demonstrated the metaphor. UI documentation is not meant to capture every screen and every dialog.
However, it must have enough information that someone reviewing the spec would gain a very clear idea of the look and feel of the application. We also took some pains to spell out key dialogs or those where the metaphor was particularly important. One last thing, when we did the specification, we worked with a graphic design group that actually created several initial, candidate versions. After the team members voted on the candidates, we took the winner and fleshed it out in much more detail. I think paper prototypes are an important part of early UI development and specification. Have a look at the lecture notes here: I think it's important to note that good GUI specification should contain a set of guidelines/principles for the entire project, to ensure consistency.
Ui Specification Document Examples
I usually inherit from a well established set of guidelines (EX: ) and then list any differences. For individual forms, components, etc. I specify the general design using Pencil with a lot of annotations.which allows for platform-agnostic rapid ui prototyping akin to paper prototyping. It's still important to use paper prototypes for anything that non-designers will likely want to change. Users are more likely to suggest changes if the design looks impermanent (this is why cab software can make printouts with degraded sketch-like quality).
Also, I've found it's helpful to have a UI design acceptance testing phase. All project stakeholders should sign off on the UI design before it's implemented. After all, to most non-technical computer users, the user interface IS the application. Consider if the GUI specification is required for commercial or design reasons? The depth of detail required of a GUI specification will generally be driven by the commercial requirements of the commerce surrounding the software project rather than the end user requirements. A GUI specification that contains extensive details such as font selections, icons, pixel border widths etc is generally created so as to capture the scope of the project so as to avoid potential commercial disputes at the end of the project. My experience is that asking the customer (end users) to make selections on lots of small GUI details at the start of the project only adds unnecessary noise to the overall customer engagement.
Iterate The GUI Specification If it is a new software project (as mentioned in the question), then often the GUI needs to be discovered by all team members, developers and end users included. Therefore I would suggest taking an iterative approach to your GUI specification. Start simple, only a few screen shots, that when combined allow the user to complete something useful (this could be one or more use cases). Then each subsequent iteration adds more appropriate detail. What does a GUI specification document template look like?
IF the GUI spec is for design reasons; I would recommend a word document with the following structure:. On the top half of each page place a mock screen shot a. On the bottom half of each page write what you think is important b about the above screen shot.
If the GUI spec is for commercial reasons; I would recommend a word document with the same structure as above plus the following:. Font, color, logos, pixel border widths, glossary etc. Pretty much as much as you can document within the time available. a Tools to generate mock screen shots:, Visual Studio + with useful comments overlaid are great. b What's important? The short answer is '.it depends.'
And it is up to the GUI designer and end users to collaborate so as to discover and then identify what is important.
Congratulations, you’re a. From your humble beginnings, perhaps working as a tester, you’ve progressed to a team developer, then a senior developer, and now you’ve made another leap, the biggest of them all, to working directly with clients. But where the other transitions were linear, this last one was exponential. While in the past you got your marching orders from an employer that worked with clients or was itself in the software business, now all those responsibilities that were once distributed between expert-testing, program management, etc., are all yours. And now you’re working with clients who are not in the software business; they’re in another business that needs a piece of software, and they don’t have a clear and precise vision of what they want from you.
This is a far greater challenge than it appears.Note:. Here, I’m describing smaller clients who want a one-man army from their developer. It’s not the only route a freelancer can take, and those aren’t the only clients we work with at Toptal, but it’s the route I enjoy most. Of course, if you’re working in a team and not, some of the below won’t apply. For example, if you’re using or, you’ll probably want to structure your milestones slightly differently.
From beginnings working maybe as a tester you've progressed to a team developer, then a senior developer, and now you've made another leap, the biggest of them all, to working directly with clients. You’ve all heard about the supreme importance of communication. You can’t work by getting a few sentences of terse description over Skype and saying “See you in three months when I’m done.” You have to be in communication with your client and at every stage of your work make certain that you have congruent ideas about the objective, because it’s rare indeed that a client will send you wireframes and a detailed functional specification. You will get a very general idea of what the software is supposed to do, look like, and flow.
If you write an application based on the cursory description you usually start with, there’s almost no chance that your client will be happy with the result. At each stage, you must iterate your way closer to agreement. You can't work by getting a few sentences of terse description over Skype and saying 'See you in three months when I'm done.' Having worked for years at companies that were themselves in the software business, where everyone on the team was from the same culture, spoke the same native language, worked in the same hallway, met each other daily, etc., it was noteworthy that the company still didn’t get what it wanted half the time. Make no mistake: the challenge here is enormous. Why Software Design Documents Matter So, when you take on a new project, before you even open Xcode or Visual Studio, you need to have clear and agreed-upon design goals. And these goals should be established in a specification document.
If the client hasn’t written one, you should write it, and submit it to them for review before you even open your IDE. And if you encounter a client who says, “We don’t have time for design documents”, candidly, you should walk away from the project because you have trouble ahead. The specification need not be particularly lengthy; it can be just a few pages, but at the very least it should lay out the user interface, include wireframes (if there’s a UI component), and set completion milestones. Without this document, you’ll end up in a loop of acrimonious equivocation, clients disputing what they told you or what you told them, angrily sending cut-and-pastes of previous communications, interpreting and arguing until the time comes when the client demands that you make changes to bring the application into conformance with “what they actually asked for,” and expects you to make those changes without pay. With this software design document, you’ll have an answer to any such quibble: when disagreements arise, you can refer to the specification which the client agreed to and signed-off on, pointing out that you have fulfilled it to the letter.
Instead of angry arguments, you’ll make amendments and clarifications to the document. If anything, the client will apologize for letting the imprecision slip through in the first place.
We all want satisfied clients. We all want a friendly working relationship. And we all want the pride of a job well-done. But these can’t be achieved if there’s any vagueness whatsoever about what the job actually is. If your client says that a design document is too much extra work, it’s your job to explain to them that the real extra work will emerge when revisions need to be made due to some sort of misunderstanding. If the client still insists that you advance without such a document, you should accept the fact that you have an unworkable relationship and walk away. What Should the Software Design Specification Actually Specify?
At the very least, it should be a description of the desired application, criteria for completion, and milestones. Remember, you are sharing what is best described as a requirements and function document, not an implementation specification. And unless a specific implementation is a stated client objective, how you make it work is up to you. User Interface Most projects are applications, not libraries or frameworks.
But if you happen to have one of these as a deliverable, count yourself lucky because the user interface is far and away the most problematic component of your design document template, and almost always leads to misunderstandings. Many clients will send you perfect illustrations created in a graphic editor by a graphic designer who is not a programmer. But the problem is: these illustrations say nothing about animations, control states (e.g., Is this button disabled? Does it disappear when unusable?), or even what actions to perform when a button is pressed. Many clients will send you perfect illustrations created in a graphic editor by a graphic designer who is not a programmer. But these illustrations say nothing about animations, control states, or even what actions to perform when a button is pressed. Before you start writing the code behind these illustrations, you should be able to answer all of those questions.
Specifically, you should know:. Are controls always visible and/or enabled? Under what conditions do their states change?. Looks like a bitmap—is it a button?.
What transitions occur between these states and views? And how should they be animated? If it’s up to you to generate the UI for the client’s concurrence, do the same in reverse: use a wireframe tool and create a complete set of screen layouts, including any variants that the views show in different application states.
This can be exhaustive and tedious work, but you won’t regret it—it can save you from re-writing huge amounts of code and re-creating interfaces due to a minor misunderstanding with major implications. If you’re creating a dual application (e.g., for both and iPad), create separate wireframes for both. Screen dimensions are important too. There are (as of writing) three sizes of iPhone screens. Separate wireframes for 3.5” and 4” screens are probably excessive, but you may have to make them; in most cases, you can simply change proportions. If your client supplies you with graphics, make sure that they are correctly sized with the proper aspect ratios; morphing any bitmap that has text or objects (like circles) will introduce distortions. If they don’t match, tell the client to re-create them with matching sizes.
Don’t presume that you can stretch a 3.5” splash screen into a 4” splash and just roll with it. Functionality Key questions to ask in the application design document:. What does the application do, and how quickly does it do it?. What are possible failure conditions and how are they handled?. What one-time operations are done at the first execution (i.e., after installation)?. If the user creates entries of any kind (e.g., bookmarks), what are the limitations? Generalize these ideas, and be as detailed and thorough as you can—because errors or misunderstandings here will mean rewriting code.
Milestones Your specification template should layout clear milestones. If your client writes the functional and user interface design, you should subsequently agree on a set of milestones. Sometimes these are billing thresholds as well, but at the very least they provide a clear metric toward completion. Milestones may be in terms of functionality and/or components; they may even be separate applications if the gig involves a suite of deliverables. When possible, milestones should be approximately equal in duration.
Software Design Specification Example Here, I’ll layout the example structure of a proper design document. Of course, this template should be adjusted as-needed. For another example, see, based on.
He approaches the document slightly differently, but shares a similar sentiment. Statement of Goals Include a short paragraph describing the project and its intended audience. Functional Description What does the application do? What application states (high-level descriptions of core user scenarios) will the user encounter? For example, your functional description might look like:. First Run. Creating a New (game, search, etc.).
Operations. Background and Foreground Behavior User Interface Include wireframes for each page, with detailed descriptions of:. Each control, including states (enabled/disabled/highlighted) and operations. Supported orientations and transitions between them. Functionality represented. Error handling.
Dimensions and constraints. Here are the wireframes related to my latest iOS app, NotifEye: If you’re interested, I made these mockups using. For example, your might look like:. Navigation Bar. Left navigation control: return to home page. Title bar: current screen or operation name.
New button: create a new Thing. Table View. Section 0: Section title. Section 0 rows:.
Row control 0 (e.g., image). Text Line 0. Text Line 2 Milestones As described above, deadlines for completion and expected deliverables.
For example, the milestones section in your design document template might look like:. Facade Application showing screen and with temporary transitions and example images/text. Communication Protocol: application connects to network/server. Functional Milestone 1:. Alpha Application (with full functionality). Stability.
Ui Specification Template
Release Making Sure Software Documentation Remains Relevant I don’t mean to imply that the design phase is over once you and your client have agreed upon a specification document. There will always be details that neither of you had considered, and both you and the client will, while looking at the intermediate results, encounter new ideas, design changes, unexpected design flaws, and unworkable suggestions. The design will evolve, and the changes should be captured in your document. In my 25 years of experience, I have never once worked on a project where this didn’t happen—and that includes my own applications (i.e., where I was my own client). Even then, I created a design document with detailed specifications, and adjusted it as necessary.
Spec Document Template
Above all, keep in touch. At least several times a week, contact your client, report on your progress, ask for clarification, and make certain that you share identical visions. As a litmus test for your communication, try and ensure that you and your client give the same answers to these three questions:. What was the developer just working on?. What is the developer currently working on?. What will the developer work on next? Thanks a lot Chris, very useful.
Specially this part; 'There will always be details that neither of you had considered, and both you and the client will, while looking at the intermediate results, encounter new ideas, design changes, unexpected design flaws, and unworkable suggestions', i had been thinking until this that I'm the only one and hence may be I'm lacking something big. Somehow would like to know a way to come with a specification for backends of web applications, where the design is prone for changes during the development according to the technical capabilities.