Microsoft Office Tutorials and References
In Depth Information
handle quick design iterations without getting caught up in either the details of
high-fidelity graphics or the emotional attachment of having worked on something
for a long time. Wireframes are a conceptual tool at the start of the design process,
but later on the fidelity can be high enough to be the basis for implementation.
Wireframe fidelity ranges from site maps representing site structure to skeletal
user interface (UI) wireframes with placeholders for text and graphics as well as
detailed wireframes with actual graphics and text. If you create several
wireframes representing related windows in your software, you can link them
together to simulate the application flow. Finally, you can include color,
highfidelity graphics, and real text elements that will feed into the high-fidelity
prototypes for your software.
Task Flow or Site Map Diagram
A task flow or site map provides a conceptual framework for your software. A task
flow provides a diagram of how a user will interact with your software to complete
a task. Usually each item in the flow represents a window or the state of a window.
Often these task flows help you make key decisions on design and navigation
structure before going into detailed design.
A site map, on the other hand, is a visual, hierarchical guide to the organization of
a Website. Building a site map helps you determine the relationships and
links between various elements and pages of the Website and can facilitate
discussion about Website content and task flows. Site maps typically look like
corporate organization charts, but be careful that your Website does not simply mirror
your company's organization chart. Visitors to your site don't care how your
company is organized
they care about locating the information that they came to
find and about reaching the goal that brought them to your site, such as buying
In the following procedures we show you how to build these high-level structural
wireframes. The techniques are the same for these prototypes, so we provide only
an example for a site map. For a task flow you would substitute the task flow
diagram for the hierarchical site map.
In this exercise you will build a flowchart using Excel's AutoShapes and Connectors.