Online Resources
UXknowledgebase.com - Lots of notes and resources about UX concepts, exercises, and tasks
Figma's Help Center
Introduction to Sketching
Sketching is a two-step process:
- Idea Generation: Approach a new product and generate as many new ideas as you can. This should be done quickly without focusing on details. Decide on which one is more efficient for the task you are solving.
- Adding Detail & Refinement of Ideas: Refine the sketches and adding more detail. It's okay to get rid of some of your sketches here.
Idea Generation
- Low level of details
- Usually no color: possibly a color to show a significant part of the sketch
- Goal is to draw a lot of basic sketches
Adding Details: Wireframes
- Adding a sketch-like wireframe with more details
- Only the more promising sketches reach this point
- Possibly adding buttons, inputs, etc. to basic sketches
- Step where you start to think about user interaction
Refinement: Components
- Refine your sketches and pull out elements that you feel are very important
The Sketching Process
Step 1: Be Prepared
What supplies do you need?
- Prepare your tools beforehand: Paper, pens, markers, etc.
- Optional Ipad App: "Concepts" for Mac only
- For sketching without paper
- Free version only allows exporting sketches with jpeg, but that should be enough to do what you are looking for
Questions to Consider:
- Consider Your Goals? Whatever your goal is, it should be the center of your attention
- Think about what you're trying to solve
- Maybe you want a specific flow
- Maybe a specific interaction
- Who Is Your Audience?
- If it's for a client, stakeholder, or your teammates you need to be neat, annotate your ideas
- If it's just for you, design it however you want - be messy
- Time Yourself
- Keep yourself under a time limit
- Time your sketching, time your presentation
- Keep a time limit to help you just come up with many ideas instead of thinking too much
Step 2: Ready, Set, Go!
- Draw a frame for your device
- Is it a browser, desktop window, tablet, phone, etc.
- Start with more simple and redundant elements
- These are the bigger ideas such as header, footer, divisions, etc.
- Move onto some more detailed interactions
- Use simple shapes such as squares, circles, rectangles
- Annotate your sketches: Make sure if you look back at it in a week or two you clearly know what you were sketching
- Things to think about:
- What does the user do on that screen?
- What does the user see?
- What is the result of these interactions on the next screen?
- Find the sketches you like, and build alternatives from there
- Share your sketches
- Share with your team and discuss
- Option: Upload to Figma and share with team or client
- If working digitally, print out sketches
- If working by hand, bring originals to meeting
- If possible, share with other teams at your organization and get their opinions as well
Step 3: Refinement
- Sketches could be messy at this point, but here are tips to help clean them up a bit
- Add titles to each sketch
- Add annotations...again. These help clarify things that are too hard to be clear about with just a drawing
- Use numbers to order your sketches
- Use arrows to help indicate a transition - draw a line from a choice a user makes to the screen they go to next, etc.
- Add gestures (ie. - tap, press, drag, etc.) if you want
Sketching Tips
- Don't worry about being messy - just jump right in and refine later
- It takes some practice to draw it out. Practice drawing out your favorite website to practice.
- Keep your sketches in a folder if drawing by hand. Save and name appropriately if working digitally.
- Always be prepared. Have paper and pencil ready wherever you go.
- Have a board or space to hang sketches up. Allows you to write additional notes next to sketches. Show board to team and get feedback.
- Communicate and share with everyone. They give valuable feedback, especially talking to a developer to know what is feasible and not with coding.
- Could do all sketches right on a whiteboard so everyone can contribute, it's easy to erase and change things, and you can get the entire idea mapped out in one space
What is a User Flow?
careerfoundry.com - What Are User Flows in User Experience (UX) Design?
uxdesign.cc - A UX Designer's Guide to User Flows
User Flows
| What the user sees What they do |
→ | What they see next What they do next |
- User flows, or UX flows, are diagrams that display the complete path a user takes when using a product.
- The user flow lays out the user's movement through the product, mapping out each and every step the user takes - from entry point right through to the final interaction.
- This could be a small sequence of screens, or a journey that has many branches.
Questions to Ask Yourself Before Creating a User Flow
- What size of application will I be sketching? A large journey, or a small interaction?
- What is my starting point? Start at the beginning, middle, or end of a user's journey.
- Some people think it's helpful to think about the most difficult parts first.
- Others like to start at the end and figure out the steps that lead up to it.
- What are your next steps now that you have decided your starting point?
- Where will this step lead our users?
- Where do you want them to go?
- What does a user need to do to get there?
- What are the alternate routes to get to the same end point?
- What if the user closes the app at this point. Where will they resume?
- User's journey from point A to point B
- Identify pain points along the journey, and work to correct them
Process for Creating a User Flow
User Flows Should:
- Begin with a title. It describes the purpose of the flow and the user's goal
- Go in one direction. It is telling a story, so keep it simple and easy to remember.
- Label each step, add a very short description, and keep them in order
- Show the end goal in the user flow
Tips for Creating User Flows
- Make your title descriptive
- Create a distinct flow for each flow. Don't create flow maps to represent a user flow with many different options.
- Include details for each step and goal so that anyone that reads it will understand it.
Sketching A User Flow Example
Steps
This example could be for a user that searches for a product.
- Frame 1: Search - Come to home page and go to search bar.
- Frame 2: User sees results - See results, show some images with content, when user clicks on specific product leads to frame 3
- Frame 3: Item - Picture of item, name, price, options to change color, description, button ADD
- Frame 4: Cart - Item in cart, checkout button
Alternate flow: Think about ways to make this process easier
- Frame 1: Home - Place products strategically for user based off of their habits and interests
- If they tap on an item on the home page, then leads to product page.
- Then if they buy it, it takes them to cart page already created.
What Is A User Journey
experienceux.co - What are User Journeys?
uxplanet.org - A Beginner's Guide to User Journey Mapping
growthdrivendesign.com - Journey Mapping: How it Works
uxmentor.me - User Journey Beginner's Guide
User Journey
- A user journey is a path a user may take to reach their goal when using a particular website.
- User journeys are used in designing websites to identify the different ways to enable the user to achieve their goal as quickly and easily as possible.
- A user journey map is a diagram that visually illustrates the user flow through your site, starting with initial contact or discovery, and continuing through the process of engagement into long-term loyalty and advocacy.
User Journey vs. User Flow?
- While user flows depict the physical journey of the user through an app or piece of software, user journeys deal with the emotions, the pain points, and the motivations of the customer. Your map is a visualization of the step by step experience the user goes through.
Sketching A User Journey
→ Image below of these steps sketched out
- Label step 1 on paper. Draw a frame.
- Decide if it's a welcome screen that the user sees, and if it has a button or some other way to lead them into the website.
- Draw arrow to next frame.
- Label step 2 on paper. Draw a frame.
- Thinking about user's reason for coming to your site. They want to search for something. Create a search box at top of second frame.
- Add some boxes under the search box. Maybe some text under the boxes.
- Arrow to next frame.
- Label step 3 and add frame.
- User has now found the product they were looking for, and now they are researching the product in frame 3.
- Draw a frame with a large X at top to represent product. Lines below it to represent text describing product. Buy button at bottom.
- Arrow to frame 4.
- Cart, with product picture and short description next to it. Button to check out.
- Arrow to frame 5.
- Confirmation page that order has been placed.
- Arrow to frame 6.
- Confirmation that package has shipped and been delivered.
Alternate flow:
- User can't find their product in frame 2.
- Leads to new frame as a category search.
- User starts reading reviews from frame 3.
- Leads to new frame for reviews.
Sketching A User Journey
Example:
- Sketch out examples of different pages you might use on your website
- Home screen with details you want to include
- Saved page - page previously saved of a product they saved in the past
- Cart - make sure buttons are easily accessible, especially on mobile devices
- User settings page
- Order history screen - history, status, shipped status
- Sketch a mini site map.
- Start with HOME at top, draw lines to show where the user goes from there
- HOME → ITEMS → CATEGORY
- SAVED → ITEM → CART
- SAVED → CART
- SAVED → RELATED ITEMS
What Is A Navigation Scheme
smashingmagazine.com - Planning and Implementing Website Navigation
usabilitygeek.com - 10 Guidelines for Navigation Usability
usabilitygeek.com - UI Patterns for Navigation That Makes Good UX Sense
uxplanet.org - 5 UI Patterns: Navigation that Makes Good UX Sense
Navigation Scheme
A navigation scheme is the plan that determines how web pages will relate to each other.
- A navigation structure involves a bit higher level of abstraction than just sketching pages.
- A navigation flowchart (or sitemap) organizes how you are going to guide visitors through your material.
- This should be done early on, and will influence user flows and site maps as you work.
Sketching Screen States
Screen States
Screen states are where you draw the entire screen and different interactions
Example: A user comes to a home page with a search feature. What does the user see on the home page?
- These are more detailed screens
- Include many elements that the user may click on with more details
- Product will show name, price, description, and maybe a heart button to favorite it
- Show carousel if plan on having different choices to scroll through
- Interests section at bottom with multiple interests already chosen
- See All button for interests in case you cannot see all of them
Example: A user clicks on search and an overlay pops up. What does the user see?
- An X in the upper left hand corner with a search bar next to it
- If on mobile, remember that the keyboard will be showing, which covers about half of the screen
- As the user types in the search field, the next screen state will show auto suggestions based on what has been typed out so far
- When labeling a new screen state of screen 1, label 1.1
- Screen 2 - Search results screen
- Search bar should still have search typed into it
- Add a filter icon next to search bar
- Label Results
- Set up results as cards so they can tap on the entire thing
- Tap on one product, take you to its product page
- If you tap the heart icon, does it take you to the saved page?
- What happens with filters? Is it a new overlay? Does it come in from the top down with motion?
- Does the filter include by price, by what's new, maybe by reviews only?
