After sketching the story boards and sketching the interfaces on the papers, the basic idea of the application was generated and then for more detailed mock-ups as the medium fidelity prototypes, we started working with wire frames. For generating the wire frame mock-ups, we used software called Balsamiq by balsamiq.com. Since we had not the licence for the full version, we had to try the web demo instead of having the full functionalised software. But that was very successful and a high detailed rich wire frames could be generated according to the paper sketches.
Initial Wire frames using Balsamiq (Moday Clinic Mobile App Prototype)
These prototypes are sort of a best-of-both-worlds implementation that allows for a combination of both high-level and detailed views; rapid, iterative changes; and the ability to conduct meaningful user tests to evaluate complex functionality and to help determine system specifics.
By combining HTML, CSS, and Javascript (for web applications), we're able to relatively quickly create an interactive example system that is designed to help the client, the development team, and the visual designers better understand the requirements guiding the project. When used as part of an application development project, a prototype can:
Communicate the design. A picture is worth a thousand words; an interactive tool, much more than that. A prototype demonstrates to a client what functionality the system will deliver and what it will be like for users to interact with that system. With this knowledge, a client and the development team can more easily prioritize the development of features and functions and determine project scope.
Allow for participatory design. Prototypes are primarily top-level, simple in design, and relatively inexpensive to implement and change. Available to the client team, the development team and a wide variety of users, prototypes lend themselves to a participatory design process where many key roles have to "buy-in" to the nature and behavior of the final product.
Catch mistakes early. Ideally, prototypes are frequently tested in formal and informal usability sessions throughout their development. This allows design flaws such as ambiguous labels or intolerance for user errors to be caught early and corrected relatively inexpensively. Prototyping reduces risk and helps avoid the possibility that the final product becomes merely a prototype for the next release or a situation in which the prototype itself becomes the final product!
Support iterative development. Frequent user testing and subsequent prototype revision can also support an iterative development process. In this way, the Web site or application interface can evolve (through the process of either adding, refining, or removing features and functionality) until it reaches a stable state. Once the design is stable, development can begin.
Facilitate detailed requirements gathering. Because prototypes provide a common ground of understanding between users, client team members, and development team members, they greatly help in establishing business requirements, application requirements, and use cases. Ideas for what the system should include or how it should function can be quickly worked into the prototype, evaluated, and reflected in the formal requirements.
Guide later development stages. Once a prototype is developed and approved, it becomes a blueprint that can guide many teams involved in the later stages of the development process. Graphic Designers, for example, can use the prototype to understand system behavior and graphical requirements (buttons, navigation, etc.). At the same time, Application Developers can use the prototype as a live representation of the use cases (even to the point of using prototype pages as a test front-end to their code) and to understand how the system is intended to interact with users.
No comments:
Post a Comment