'

UX Toolkit: Phase Two - Structure

Понравилась презентация – покажи это...





Слайд 0

UX Toolkit Phase One Phase Two Phase Three discovery structure skeleton UX Designer | Twitter @maitedalila


Слайд 1

Table of Contents Strategy Information Architecture User Flow Affinity Map Card Sorting Task Analysis MOSCOW Method Site Map Task Flow Mind Map User Flow User Journey Goals and Actions


Слайд 2

strategy


Слайд 3

Affinity diagram 1. Present the topic or define the problem clearly. 2. Give the team index cards or sticky-notes. 3. Write an idea or issue per card. 4. Sort the ideas or issues into categories as a team 5. Labeling each group of cards. 6. Eliminate duplicate ideas. 7. Add arrows between groups to show relationships. A tool used to organize ideas and data. Exercise Capture Group Label


Слайд 4

M.O.S.C.O.W. method Must have Should have Could have A tool to help understand priorities and create your MVP. Template Won’t have


Слайд 5

MINDMap Subject Date A method to organize your thoughts for later review. Template


Слайд 6

information architecture


Слайд 7

Card sorting 1. Gather/prepare these things • Use deck of cards. • Write one item per card. • Use some sort of divider, like a chopstick or a pencil., masking tape 2. Organize the cards in groups that relate to each other 3. User testing - Ask to organize the cards in groups relate to each other Exercise Capture An inexpensive method for finding patterns in how users would expect to find content. Label


Слайд 8

SITE map Template 1.0 HOME Primary Page Static Page Sub Page Search Search 4.1 Form Page 2.2 Multiple Pages Page Content 2.3 Interactive Page


Слайд 9

user flows


Слайд 10

TASK Analysis Steps Needed to Complete Considerations / Influencers Pain points Template Emotion 1 2 3 4 A tool to understand in detail how users perform tasks and achieve their intended goals.


Слайд 11

USER flow Template What is the business objective (The action you want the visitor to take on the site) Begin What is the user objective (The desire or needs that they want to satisfy) Start by answering these questions. (Answers will come from your users) What are all the questions they have about this Decision EX.Post on blog? What information do they need to take action? task? Yes Process / Task /Action EX. Create a post Explains how a user completes a task No


Слайд 12

USER flow Example Task 1 Start Presentation Go through Presentation Yes Understand? Finish Presentation No KEY Happy Path QA Tweet @maitedalila Task: Going through this presentation. Understand?


Слайд 13

USER Journey What is the desire/ need they want to What questions/ comments do they have about the task? Phase What questions/ comments do they have about the task? What questions/ comments do they have about the task? What questions/ comments do they have about the task? Phase Negative Positive Phase What questions/ comments do they have about the task? Template Timeline


Слайд 14

TASK flow Template Breakdown MOSCOW Phase Phase Phase Task Task Task Task 1. What you need to accomplish task 1. What you need to accomplish task 1. What you need to accomplish task 2. What you need to accomplish task 2. What you need to accomplish task 2. What you need to accomplish task 2. What you need to accomplish task 3. What you need to accomplish task Task Analysis Phase 1. What you need to accomplish task Phase 3. What you need to accomplish task 3. What you need to accomplish task 3. What you need to accomplish task Shade in MOSCOW. Add and remove as you go along the project A functional breakdown of the user’s journey


Слайд 15

GOALS & actions Action Screen Requirements You want to…. You want to…. You want to…. EX. You need to…. Fill out a form Goals EX. You want to Setup An Account You need to…. You need to…. You need to…. EX. You need to…. Accept T&Cs You need to…. You need to…. You need to…. Screen needs to have…. Sign up Form Screen needs to have…. Screen needs to have…. Screen needs to have…. Screen needs to have…. T&C Checkbox Screen needs to have…. Screen needs to have…. Screen needs to have…. Helps breakdown must-have components of each screen. Template


Слайд 16

Next up Phase One Phase Two Phase Three discovery structure skeleton


Слайд 17

UX Designer Twitter @maitedalila


Слайд 18


×

HTML:





Ссылка: