sitemaps & user flow diagrams nov 2015.pdf · sitemaps & user flow diagrams. our mission is...
TRANSCRIPT
Sitemaps & User Flow Diagrams
Our mission is to create opportunities for anyone to learn, discuss, and share knowledge about the field
of User Experience.
Our Mission Statement
November 17: Sitemaps & User Flow Diagrams
December 15: Wireframing & Prototyping
January 19: Usability Testing
February 16: Documentation & Execution
Learn UX SeriesUpcoming Meetups
Site Maps & User Flow Diagrams DOWNTOWN UX MEETUP
Julianna Wood & Christian Ratterman
What is a site map?
● Floor plan for your site, that gives you a visual representation of the organization and how different sections are linked together
● Hierarchical diagram showing the structure of a
website or application
● Used to define the taxonomy through groupings of related content
● Used as a reference point for wireframes, functional specifications and content maps
● Important step of the UX process as it ensures content is in places users would expect to find it
Why do I need a site map?
● Show how the navigation should be structured
● Help identify where content will sit and what needs to be produced
● Show the relationship between different pages
● First tangible deliverable showing what you will be creating
Different people get different things from a sitemap:
● Stakeholders can confirm that the direction the site is heading is the right one and that their goals are represented in the organization
● Developers can validate assumptions about scope and complexity
● Visual designers can get an idea of how much variation may be required and whether the design will need to be modular and extensible
● UX designers will reference the site map when the design wireframes
When should I create my site map?
● After you have completed research, personas, user journey work, and any other initial discovery● When you have a good grasp of any existing or new content that will be included
Personas User Journeys
Research
Content Inventory
Site Map
How on earth do I create a site map?
There are two main card sorting workshop methods:
● Open Card Sort
● Provide participants with a bunch of cards or post-its, each with one item of content or functionality written upon it which you have identified from your discovery phase
● Participants are then invited to organize or sort the content into groups, and come up with a name for the groups
● This technique is typically used to generate ideas for taxonomies
How on earth do I create a site map?
● Closed Card Sort
● Generally, this is used further down the line with creating your site map after you have come up with some initial top level category ideas
● Participants are given cards with content written on them as in the open card sort, but are asked to sort them into the categories you have provided
● If participants are putting cards in places you wouldn’t expect them to then there is a good chance you need to revisit your site structure
● This technique is typically used to evaluate a taxonomy you have come up with.
How on earth do I create a site map?
After you have an initial site map, it’s time to bust out your personas and user journeys. Question your sitemap with these in mind along with a few other key questions:
● Does your proposed taxonomy support your user journeys?
● Would your different personas understand the labeling you have come up with?
● Does the site map have any categories with only one item of content? (Generally creating categories for single item content isn’t good practice)
● Does the site map have more than 7 categories? If so can I group any together? (Anything more then 7 is generally excessive and indicative of a poorly grouped taxonomy)
What should a site map contain?
● The sitemap you ultimately create needs to have a few key attributes:
● A homepage/home screen item at the top● A reference number for each item in the
sitemap (This helps when creating wireframes or functional specifications)
● A label for each item in the site map
What should a site map look like?
What should a site map look like?
Time for y’all to make a site map!
Break into 6 groups
We will hand out post its containing content for the sites you will be architecting! As a group, perform a card sort, create your navigation labels and hierarchy, and number your site map!
Don’t forget to think about who your users are, what’s most important to them, and what their goals and motivations are!
What is a user flow diagram?
Diagram showing the interaction path and decision points for a user moving through your system. Unlike a sitemap, the flow diagram walks through detailed steps the user will take to accomplish a defined task.
● How user flow diagrams help○ Defines interface pages that need to be designed○ Allows refinement of interaction in early stage design to
simplify user experience○ Provides guidance for developers during later phases of
the project○ Allows simplified concept sharing among your team and
customers.○ Helps discover gaps in approach○ Help guide additional user research
Source: Huy Tran; :Case Study: Optimizing Shopping Bag to CheckOut Experience.”http://www.beyondtheblur.com/Forever21/FOREVER21_User_Experience.html
When should I create my flow diagram?
● When in the process?○ Sketches of flow diagrams can be built early in design, right after an interaction is decided○ Use them to find complex areas of focus and areas where further user research may be needed○ Continue to define new ones as common user actions are discovered in the requirements
● When to update?○ Refine early flow diagrams as the design evolves○ Increase detail as you narrow down interaction
● What will be needed by developers○ Can support requirement specification by providing a clean view of interaction pages○ Best to tie steps in the user flow to specific design specifications○ Not all dev teams need flow diagrams for every interaction
■ The more separated the development team is from the design planning the more it helps.● Common examples
○ Login/Account creation○ Search and sort○ Data entry○ Process walk through, (tax filing, survey, advice system)○ Checkout
How do I create my flow diagram?
● Select an entry point for that flow diagram○ Often an action that will lead them into a common
process○ Sometimes multiple points of entry exist, may need
to pull back in the flow or show them converging● Move linearly through the process
○ Mark decision points in a standard way and choose one of the paths, circle pack to move down the other path.
○ Tools that maintain line attachment significantly improve your ability to clean up and adjust for readability as your ideas expand.
● Keep notes on work that arises from the development○ Additional offshoot diagrams○ Design problems that need further research or
planning○ Areas of efficiency gain where the user flow should
be expanded
Notes:- Define login and account creation, include specs on
returning to original location- multiple paths to additional shopping required research
ways to improve user experience in this area.- Look for ways to shorten path to purchase, need to
minimize points of loosing the user.
What should a flow diagram contain?
● Use consistent diagram style and shapes across all of a project's user flow diagrams.● Common Guidelines
○ Start and end points are consistent shapes○ Rectangles for user steps○ diamonds for decision points○ circles for splits off of decisions
■ Space saver: write along lines● Be creative, if images or interface designs help clearly define to viewer the goal you can adapt● Flow from left to right
○ Nature of some diagrams may drive top left to bottom or bottom right
Let’s walk through an example together!
Any questions?
Community Announcements
The SUX MeetupStarting Now @ Tap & Grind