organize and connect scattered wireframes.make sure your product is still friendly to users, even in rare malfunction cases which you wouldn’t have thought about before.design the interaction flow of your product.A flowchart is an essential tool for interaction designers as well as product managers. However, in this guide, I will only talk about flowcharts on Web design. For example, a factory can use a flowchart to tell its workers what are the right procedures when someone gets hurt. In general terms, flowcharts can be useful to anyone who wants to create a flow for almost anything. flowchart, as its name indicates, is just a chart describing how a system, under different circumstances, reacts to users' status, decisions and behaviors. So here you have it, the English version of "Some experience on drawing Web flowcharts", with updated content and home-brew templates ready for download.Ĭovers the most important things you should know about Web flowcharts, which include: Besides, it's been years already and I have gained new experiences and thoughts that I would like to share with the community, especially with the English readers. I did write a new blog post one year later pointing out the flaw but it hasn't drawn as much attention as the original post. Therefore, some of the content didn’t follow the convention, which is not appropriate from the “Don’t Repeat Yourself” perspective. Frankly, I wasn’t aware of this vocabulary when I was writing the tutorial instead, I created my own vocabulary and presented the idea to the mass. Today, the article that was published almost four years ago still leads a lot of traffic to my personal site.Ī major problem which makes the content misleading: It didn't use "Visual vocabulary" for "describing information architecture and interaction design". Someone even created a set of flowchart templates following the same design style I introduced in the tutorial. Recommendations, reprints, discussions, and follow-up blog posts emerged online and offline. The article instantly gained a wide attention. In the fall of 2008, I summarized my experiences into a tutorial, titled as "Some experience on drawing Web flowcharts", and published it on my blog. The product manager liked it, and the engineers used it as a guide to program the Web pages. That was when I started to rely on flowcharts to learn the requirements, and to design the interactions. Here business logics and requirements were so complicated and fast-changing that understanding the business itself was very challenging. Thus, I didn’t realize that the complex flowcharts could be so useful until I joined, the largest online payment platform in China. In the early days, the flowcharts I drew were simple, the number of nodes were limited, and the logics were straightforward. Started to draw flowcharts from the very beginning of my design career. I would like to thank him for everything he has done for me. I couldn’t have done this without his effort. He spent hours helping me correcting this tutorial. So I added a line for every page on the site map where you can offer a very brief description of the page.Designer who loves alternative rock, classical guitar, reading and writing. In other words, if you have a page titled, “Orders”, it’s not clear if that’s a dashboard, a list of orders, or even a form form for adding an order. Unfortunately, clients and developers and designers don’t always know what kind of page the page will be. In your typical site map, you show the page’s title adjacent to the little box for that page. Lately, however, I’ve been site mapping in sweet, luscious OmniGraffle, and I created a Unify-inspired OmniGraffle stencil for making site maps.īut, there’s one problem with lots of site maps. Out of the box, Unify is designed for use with Adobe InDesign. I’ve used EightShapes’s brilliant Unify deliverable system for about four years. He shared the downloadable stencil which can be obtained right from his site. In the stencil, beside each page title there is now a little space for an explanation of what the page is about. Austin recently came up with a sitemap or site architecture OmniGraffle stencil that makes room for some extra description.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |