Practitioners-Guide-User-Experience-Design

Start with Quick and Dirty Miniframes
In putting the sketches for pages together, creating a site map, I suggest also working very
much in the rough at first. A former student and later coworker of mine dubbed these
rough site maps miniframes to stress how unfinished they are. In the miniframe on page
96, which I made for a video app, you can see various kinds of page layouts, like the
different forms a list may take in the browse, categories, and search results screens. This
rough work allows you to get a sense of the bigger picture without committing too much
time. You can quickly establish a few different ideas for the entire architecture of your
product to really let your creativity flow before you get into the detailed work of making
high-fidelity wireframes. I made sample miniframes with my drawing program, but you
can also make them with hand sketches.
These miniframes are like the map at the front of a fantasy novel with hints to places
where the story unfolds. They should depict the places your users may enter your app and
should focus on the ways those users will be able to get to the cores of the product. Think
of miniframes as abstractions; they roughly depict the beginning, middle, and end of an
experience. They aren’t meant to portray the aesthetics of your product or to inspire
emotions the way wireframes or visual mocks do. They are meant only to be an outline
and a framework for how the details of a product will be constructed.
I find that these sketches, alongside the personas, help me put myself in the place of
the user while also exploring how information will move along the paths of the site or app.
As you sketch your pages, you want to put them in the order of the flows so that they
really do work as a map. This helps you spot places where information may be blocked off
from the people who want to use it; one of the real tricks of crafting site maps is that users
and the information they want are not always in the same place at once. For example, you
may want to have a page that combines videos with the biographical information about a
presenter that you might have planned for a separate page.
Your site map will also help you understand how well you’re taking account of the
system issues, such as the time for calls to the databases on the servers. And you want to
represent this information on the views. This rough map can also be a way to prioritize
your and the rest of your team’s work and establish an architecture for engineering work to
begin. You don’t want to keep your sketches close to the vest; you want to begin getting
feedback about them early. As I’ll discuss more in chapter 5, you never know who on your
team may have good ideas for you or see problems you’re overlooking.