- Writing Use Cases
- Creating Screenflows
- Designing Wireframes
- Storyboarding Your Product
- The Three Rs
- The Tools to Use
- Whats Next?
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Creating Screenflows
A screenflow is essentially a flowchart of how one screen leads to another—or three or four or twelve others—and how data might be transferred from point A to point X. As you might guess from its name, it maps out the flow of screens (or states) in an application or information space. This approach can be applied to information spaces as well as software interactions. It’s a great way to quickly organize all your thoughts about the sequences users will go through while using your site, and it helps to surface the assumptions.
Much has been written about how to create screenflows, so instead of rehashing the words of others, I’d like to just point you to the work of Jesse James Garrett, author of The Elements of User Experience: User-Centered Design for the Web, and the man who actually coined the term Asynchronous JavaScript and XML (AJAX), which has caused such a ruckus that you’d think the Beatles released a new album.
See, Garrett is no one-hit wonder. Long before AJAX became a household word (c’mon, you know you say it out loud at least once a week), he contributed something equally valuable to the tech community, albeit with far less ticker tape, known as the Visual Vocabulary.
The "VisVocab," as it’s known to people too lazy to pronounce eight whole syllables (like me), is similar to the Unified Modeling Language (UML) used by programmers and system architects to map programming matrixes, but it’s infinitely simpler to use and therefore infinitely simpler to remember.
VisVocab makes use of a small set of easy-to-draw icons and shapes that signify different aspects of a design. One shape is used to represent a web page, another to represent a downstream movement such as a file download, and other shapes for the same sort of extremely common paradigms in web design. Each shape is simple in form and fairly easy to determine what it represents. If this description seems too abstract, here’s one that should help you sleep at night: Each shape in the VisVocab is designed so you can easily draw it on a whiteboard.
Whiteboards are omnipresent in the hallowed halls of web startups and Fortune 500 companies alike, and if you don’t have one within 30 feet of your desk, you might consider a new job. Yup, it’s that thing that Office Max calls a "dry-erase board." It’s big, it’s white, and you can erase everything you write on it. And for web teams, it’s the new water cooler. You can gather your cohorts around it and quickly draw up a screenflow that everyone agrees on (if you’re lucky), so you can go back to work. And the VisVocab makes this exercise easier, because you don’t have to consult your textbook from Geek University every five minutes to remember how to illustrate a data transfer. If you’re a designer, you can also use the VisVocab in a meeting with the marketing folks without scaring them away, because the language is so simple to grasp that even that kid down the street who plays guitar in his garage until 2 a.m. can figure it out.
So go print out a hardcopy (yes, I said "print out") of the Visual Vocabulary and staple it to your forehead. It’ll make your life easier.