{"id":2650,"date":"2012-06-20T19:30:05","date_gmt":"2012-06-21T02:30:05","guid":{"rendered":"http:\/\/crysodenkirk.com\/blog\/?p=2650"},"modified":"2012-06-22T15:39:41","modified_gmt":"2012-06-22T22:39:41","slug":"character-module-design-process-userflows","status":"publish","type":"post","link":"https:\/\/crysodenkirk.com\/blog\/2012\/06\/character-module-design-process-userflows\/","title":{"rendered":"Character Module Design Process: Userflows"},"content":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/crysodenkirk.com\/blog\/wp-content\/uploads\/2012\/04\/CharaModFlowsCM8-AdminReviewsModerationQueue.png\" alt=\"\" title=\"CharaModFlowsCM8-AdminReviewsModerationQueue\" width=\"250\" align=\"right\" class=\"outline_img\">Userflows are the foundation from which the interface takes its form. All later parts of the project hang upon them. So what are they?<\/p>\n<p>The userflow is a map of how the user interacts with the system, and how the system responds. The userflow will define what actions can or cannot be taken within the system, what happens when there&#8217;s an error, and how different types of users (for instance, this project uses Guests who aren&#8217;t logged in, Users who are logged in as registered users of the forum, and Admins, who belong to the admin group) navigate differently through the system. Note that a userflow will delineate what controls are needed but does NOT specify the form they take 99% of the time. Choosing the format of the control comes later, as part of the interface design, once you look at all the controls that are needed and how you can present them without them getting in the way.<\/p>\n<p>There are a number of super programs out there that you can use to create stunning userflows. I used to use InDesign for them because I was comfortable with it from my print background but Illustrator, Visio, OmniGraffle and probably twenty or thirty other programs all have great features that can streamline your work and give you a polished presentation.<\/p>\n<p>But you know what? I like drawing them in Google Docs. Besides the fact that I can access them from wherever, on my laptop, my pc or my Mac with equal ease, and share them with whoever without having to make a zillion copies, I just find it really easy to work with. Plain single-color boxes and arrows that snap to the anchor points of the boxes so I can move the box without having to reflow if I need to? Yep, that&#8217;s all I need. There&#8217;s something to be said for having a snazzy presentation for a client, and I get the arguments in favor of &#8220;sketchy&#8221; styles. I&#8217;m not knocking either approach. Personally though, I prefer to keep my flows as bare and simple as I can because when I start focusing on how to make them trendy, I&#8217;m diverting attention from making them function.<\/p>\n<p>Flows available after the jump.<!--more--><\/p>\n<p><center><\/p>\n<div class=\"port_img\"><img decoding=\"async\" src=\"https:\/\/crysodenkirk.com\/blog\/wp-content\/uploads\/2012\/04\/CharaModFlowsCM1-userviewsowncharacters.png\" alt=\"Flow 1: User Views Their Own Characters\" title=\"Flow 1: User Views Their Own Characters\" class=\"outline_img\" style=\"background:#fff;\"><\/div>\n<div class=\"port_img\"><img decoding=\"async\" src=\"https:\/\/crysodenkirk.com\/blog\/wp-content\/uploads\/2012\/04\/CharaModFlowsCM2-ViewsOwnCharacter.png\" alt=\"Flow 2: User Views A Character Page\" title=\"Flow 2: User Views A Character Page\" class=\"outline_img\" style=\"background:#fff;\"><\/div>\n<div class=\"port_img\"><img decoding=\"async\" src=\"https:\/\/crysodenkirk.com\/blog\/wp-content\/uploads\/2012\/04\/CharaModFlowsCM3-CreateUpdateOwnCharacter.png\" alt=\"Flow 3: Create\/Update Character\" title=\"Flow 3: Create\/Update Character\" class=\"outline_img\" style=\"background:#fff;\"><\/div>\n<div class=\"port_img\"><img decoding=\"async\" src=\"https:\/\/crysodenkirk.com\/blog\/wp-content\/uploads\/2012\/04\/CharaModFlowsCM4-Userdeletesacharacterfromtheirprofile.png\" alt=\"Flow 4: User Deletes Character From Profile\" title=\"Flow 4: User Deletes Character From Profile\" class=\"outline_img\" style=\"background:#fff;\"><\/div>\n<div class=\"port_img\"><img decoding=\"async\" src=\"https:\/\/crysodenkirk.com\/blog\/wp-content\/uploads\/2012\/04\/CharaModFlowsCM5-UserAdminGuestviewsallcharacters.png\" alt=\"Flow 5: User\/Admin\/Guest Views All Characters\" title=\"Flow 5: User\/Admin\/Guest Views All Characters\" class=\"outline_img\" style=\"background:#fff;\"><\/div>\n<div class=\"port_img\"><img decoding=\"async\" src=\"https:\/\/crysodenkirk.com\/blog\/wp-content\/uploads\/2012\/04\/CharaModFlowsCM6-UserAdminViewsCharacterListOnProfile.png\" alt=\"Flow 6: User\/Admin Views Characters On Member Profile\" title=\"Flow 6: User\/Admin Views Characters On Member Profile\" class=\"outline_img\" style=\"background:#fff;\"><\/div>\n<div class=\"port_img\"><img decoding=\"async\" src=\"https:\/\/crysodenkirk.com\/blog\/wp-content\/uploads\/2012\/04\/CharaModFlowsCM7-UserFlagsCharacterForModeration.png\" alt=\"Flow 7: User Flags Character For Moderation\" title=\"Flow 7: User Flags Character For Moderation\" class=\"outline_img\" style=\"background:#fff;\"><\/div>\n<div class=\"port_img\"><img decoding=\"async\" src=\"https:\/\/crysodenkirk.com\/blog\/wp-content\/uploads\/2012\/04\/CharaModFlowsCM8-AdminReviewsModerationQueue.png\" alt=\"Flow 8: Admin Reviews Moderation Queue\" title=\"Flow 8: Admin Reviews Moderation Queue\" class=\"outline_img\" style=\"background:#fff;\"><\/div>\n<div class=\"port_img\"><img decoding=\"async\" src=\"https:\/\/crysodenkirk.com\/blog\/wp-content\/uploads\/2012\/04\/CharaModFlowsCM9-AdminUserDeletesCharacter.png\" alt=\"Flow 9: Admin\/User Deletes Character\" title=\"Flow 9: Admin\/User Deletes Character\" class=\"outline_img\" style=\"background:#fff;\"><\/div>\n<p><\/center><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Userflows are the foundation from which the interface takes its form. All later parts of the project hang upon them. So what are they? The userflow is a map of how the user interacts with the system, and how the &hellip; <a href=\"https:\/\/crysodenkirk.com\/blog\/2012\/06\/character-module-design-process-userflows\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[83],"tags":[85,101,102],"class_list":["post-2650","post","type-post","status-publish","format-standard","hentry","category-work-in-progress","tag-development","tag-seelund-trading-co","tag-swtor","work-in-progress"],"_links":{"self":[{"href":"https:\/\/crysodenkirk.com\/blog\/wp-json\/wp\/v2\/posts\/2650"}],"collection":[{"href":"https:\/\/crysodenkirk.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/crysodenkirk.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/crysodenkirk.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/crysodenkirk.com\/blog\/wp-json\/wp\/v2\/comments?post=2650"}],"version-history":[{"count":9,"href":"https:\/\/crysodenkirk.com\/blog\/wp-json\/wp\/v2\/posts\/2650\/revisions"}],"predecessor-version":[{"id":2718,"href":"https:\/\/crysodenkirk.com\/blog\/wp-json\/wp\/v2\/posts\/2650\/revisions\/2718"}],"wp:attachment":[{"href":"https:\/\/crysodenkirk.com\/blog\/wp-json\/wp\/v2\/media?parent=2650"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/crysodenkirk.com\/blog\/wp-json\/wp\/v2\/categories?post=2650"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/crysodenkirk.com\/blog\/wp-json\/wp\/v2\/tags?post=2650"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}