UXD elements/planes

Get Started. It's Free
or sign up with your email address
Rocket clouds
UXD elements/planes by Mind Map: UXD elements/planes

1. STRATEGY

1.1. user needs

1.1.1. start here first

1.1.2. what they want

1.1.3. how to fit thier goals

1.2. business objective

1.2.1. define success

1.2.1.1. making money

1.2.1.2. ROI

1.2.1.3. Save money

1.2.1.4. measurable how we know if we succeeded

1.3. know what's we build

1.4. not about technology or design

1.5. research process

1.5.1. interviews

1.5.1.1. stakeholder

1.5.1.1.1. ask question

1.5.1.2. B2B user

1.5.1.2.1. ask question ( role )

1.5.1.2.2. ask question (need)

1.5.2. review

1.5.2.1. competitor

1.5.3. research

1.5.3.1. user

1.5.4. existing product

1.5.5. analyze and review

1.6. worth doing

1.6.1. importance and feasibility/viablity

1.6.2. what we creating

1.6.2.1. everybody understand in the same way

1.6.3. find value to provide

1.6.3.1. target customer

1.6.3.2. what experience they have

1.6.3.3. how is offer different from competitor / substitute

1.7. user expectations

1.7.1. first use

1.7.1.1. what is it

1.7.1.2. is this expect to see

1.7.1.3. look credible and trustworthy

1.7.1.4. offer what I want

1.7.1.5. 3 sec decision before quit

1.7.1.6. valuable enough to be stick around

1.7.1.7. what i can do when here

1.7.1.8. how do I learn more

1.7.1.9. how to contact someone

1.8. things to remember (conclusion)

1.8.1. clear roadmap

1.8.2. clear strategy

1.8.2.1. technology decision

1.8.2.2. screen look like/arrangement

1.8.2.3. arragement

1.8.2.4. function and look and feel

1.8.3. always experience driven by business gold and user need , not coding

1.8.4. design for user , not you

1.9. Determine strategic value

1.9.1. importance vs feasibility chart

1.9.2. plot value in the chart

2. SCOPE

2.1. function specification

2.1.1. feature set of product

2.1.1.1. new feature

2.1.1.1.1. must support strategy

2.1.1.1.2. often present as good idea

2.1.1.1.3. almost emerge after project underway

2.1.1.2. clear declaration

2.1.1.3. identify what to do right now

2.1.1.4. identify what "NOT" to do right now

2.1.1.4.1. sprint planning

2.1.2. what's we creating

2.1.3. too big

2.1.3.1. can't delivery in time

2.1.3.2. make another choices/bargain

2.1.3.3. Nervous design / dev

2.1.4. too small

2.1.4.1. unclear path to full vision

2.1.4.2. unimpressive feeling to do for customer

2.1.5. start from why to what

2.1.5.1. things people say they need

2.1.5.1.1. false need

2.1.5.2. things people actually need

2.1.5.2.1. false need

2.1.5.3. things they don't know they need

2.1.5.3.1. new idea

2.1.5.3.2. brainstroming

2.1.5.3.3. false need

2.1.6. create useful specification

2.1.6.1. user scenarioes

2.1.6.1.1. high level diagram

2.1.6.1.2. all scenario

2.1.6.1.3. can group if same

2.1.6.1.4. storyboard

2.1.6.1.5. share and discuss

2.1.6.1.6. generate to each requirement/feature

2.1.6.2. be positive sentense

2.1.6.2.1. system will suggest ..

2.1.6.2.2. not allow user to..

2.1.6.3. be specific word/feature

2.1.6.3.1. eg. specific people

2.1.6.4. be objective

2.1.6.4.1. hip and cool

2.1.6.4.2. follow brand guideline

2.2. content requirements

2.2.1. details what's required to provide value to users

2.2.2. text , data , images , audio, video

2.2.2.1. different type can work together

2.2.3. major impact on UXD decision

2.2.3.1. format

2.2.3.2. purpose

2.2.3.3. size

2.2.3.3.1. performance

2.2.3.3.2. bandwidth

2.2.3.4. resource

2.2.3.4.1. person in-charge of

2.2.3.4.2. video

2.2.3.4.3. images

2.2.3.4.4. need other people to involve

2.2.4. should be strategic

2.2.4.1. fit business

2.2.4.2. fit user

2.2.4.3. delivery method

2.2.4.3.1. streming

2.2.4.3.2. download material

2.2.4.4. style & structure

2.2.4.4.1. arrangement

2.2.4.4.2. formal or strict

2.2.4.4.3. culture or hip

2.2.4.4.4. organize

2.2.4.4.5. prioritize

2.2.4.5. subject & substance

2.2.4.5.1. tell something they need to know

2.2.4.5.2. value to customer / not us

2.2.4.6. 3 sec to delivery to customer

2.2.4.7. validate content feature against project's strategic objective

2.2.4.7.1. inappropriate content

2.2.4.7.2. content resource

2.2.4.7.3. do much more to save time of next plane

2.2.5. contextual

2.2.5.1. physical activity

2.2.5.1.1. device

2.2.5.1.2. disabilities

2.2.5.1.3. activity

2.2.5.1.4. habit

2.2.5.2. emotional

2.2.5.2.1. stress

2.2.5.2.2. desire

2.2.5.2.3. need

2.2.5.3. cognitive

2.2.5.3.1. ability to learn

2.2.5.3.2. suitable for all education

2.2.6. 3 attribute

2.2.6.1. useful

2.2.6.2. sellable

2.2.6.3. buildable

2.3. Define scope

2.3.1. all player address conflict before invest in design/building product

2.4. Document

2.4.1. reference for work to be done

2.4.2. common way to describe the work

2.4.2.1. easy to understand

2.4.2.2. understand in the same page

2.4.3. don't be epic, just common understand

2.4.3.1. scheduler

2.4.3.2. milestone

2.4.3.3. nobody read epic

2.4.4. clear descrpition

2.5. Lean/Agile

2.5.1. slow the stage of completeness

2.6. poor symtoms

2.6.1. we can do that

2.6.2. far from reality

2.6.3. put them all together

2.6.4. snowball symtom

2.6.4.1. problem grow

2.6.4.2. unable to control

2.6.4.3. nervous team

2.6.5. say "no" or we will look into it

2.7. tradeoffs

2.7.1. keep or toss

2.7.2. very important

2.7.3. create need for choice

2.7.4. limit the feature set/offer

2.7.5. define what to do/ what not

2.7.6. path of strategy

2.7.6.1. focus of what business do

2.7.6.1.1. ikea is the good example

2.7.6.2. constaint

2.8. delivering continuous value

2.8.1. versions

2.8.1.1. evolve and integrate

2.8.1.2. new experience

2.8.1.3. new feature/function

2.8.1.4. long WOW

2.8.1.4.1. identify touch point for delivery

2.8.1.4.2. keep adding new feature differ from competitor ( unmet need)

2.8.1.4.3. repeatable delivery process

2.8.1.4.4. plan and stage the wow experience

2.9. gathered requirement

2.9.1. give impression the job is take order

2.9.2. may not get real requirement

2.9.2.1. most of requirement are feature/solution , not problem/need

2.9.2.2. state the need first

2.9.2.3. brainstorming

2.9.2.3.1. objective

2.9.2.3.2. functional

2.9.2.3.3. non-functional

2.9.2.3.4. business rules

2.9.3. object as mush as possible to get the real answer

2.9.4. from session of executive opinion

2.9.5. customer claim they want

2.9.6. technology preference

2.9.7. not gathered, they generated

2.9.8. most of the time, they're negotiated

3. STRUCTURE

3.1. interaction design (IXD)

3.1.1. structure experience of pattern and sequence that present appropriate option to users

3.1.1.1. user can interact with

3.1.2. dancing in step

3.1.2.1. user

3.1.2.2. system

3.1.2.3. moving along the same path

3.1.2.4. response

3.1.2.4.1. interact

3.1.2.4.2. functionality

3.1.2.5. help to meet user goal

3.1.2.6. inform state changes

3.1.2.7. prevent error

3.1.2.7.1. mistake

3.1.3. principles

3.1.3.1. consistent

3.1.3.1.1. visually remain same

3.1.3.1.2. context change only

3.1.3.1.3. link to other page inside

3.1.3.1.4. control pattern

3.1.3.1.5. behavior

3.1.3.1.6. voice

3.1.3.1.7. design pattern

3.1.3.2. predictable

3.1.3.2.1. preview

3.1.3.2.2. sense of place , expectation

3.1.3.3. learnable

3.1.3.3.1. learn from experience

3.1.3.3.2. single trial learning

3.1.3.3.3. gesture

3.1.3.4. visible

3.1.3.4.1. Discoverability

3.1.3.4.2. content hinting

3.1.3.4.3. opportunity to interact is avaliable

3.1.3.4.4. click and tap

3.1.3.4.5. touch and gesture

3.1.3.5. feedback

3.1.3.5.1. location

3.1.3.5.2. status

3.1.3.5.3. Future state

3.1.3.5.4. outcome/result

3.1.3.5.5. immediate reaction

3.1.3.5.6. acknowledge interactions

3.1.3.5.7. error prevention

3.2. information architecture

3.2.1. define volume of content , how to organized , arranged , prioritized

3.2.1.1. search

3.2.1.2. manipulate

3.2.1.3. organization

3.2.1.4. navigational

3.2.1.5. educating

3.2.1.6. infoming

3.2.1.7. persuading

3.2.1.8. flexible

3.2.2. type of information architecture

3.2.2.1. hierarchical tree

3.2.2.1.1. standard

3.2.2.1.2. organize complicate structure

3.2.2.1.3. multi-faceted navigation

3.2.2.2. hub and spoke

3.2.2.2.1. central index

3.2.2.2.2. start from central

3.2.2.2.3. can't navigate between spoke

3.2.2.3. nested list

3.2.2.3.1. linear navigation

3.2.2.3.2. quick

3.2.2.3.3. easy

3.2.2.3.4. strong sense of where we are

3.2.2.3.5. need to bear for exploring

3.2.2.4. dashboard

3.2.2.4.1. seem like hub and spoke

3.2.2.4.2. preview of chart

3.2.2.5. filters view

3.2.2.5.1. did search

3.2.2.5.2. get result

3.2.2.5.3. suitable for huge content

3.2.2.5.4. hub and spoke pattern

3.3. defining structure

3.3.1. how user get to given screen

3.3.2. where they can go when done each task

3.3.3. categories of information

3.3.4. good structure provide intuitive access to content

3.3.4.1. do it one time

3.3.4.2. remember forever

3.3.5. flexible

3.3.5.1. reorganize

3.3.5.2. expand

3.4. organizing principles

3.4.1. group

3.4.2. separated

3.4.3. relate to user need

3.4.4. relate to business objective

3.4.5. not too many option so user can't find it

3.5. roles and processes

3.5.1. someone have to do it

3.5.2. text online is enough to document architecture

3.5.3. make it simple

3.5.4. visual vocabulary

3.5.4.1. diagramming/hierarchy structure in

3.5.4.2. workflow diamgram

3.5.4.3. hub and spoke diagram

3.5.4.4. relationship between content diagram (from left to right)

4. SKELETON

4.1. interface design

4.1.1. how to arrange / present visual element for user to interact with

4.1.2. UI balance between visual form and technical function

4.1.2.1. give things people they want/need

4.1.2.2. give them when and why they want

4.1.2.3. format they can access all

4.1.2.4. form

4.1.2.4.1. organization

4.1.2.4.2. layout

4.1.2.4.3. audio

4.1.2.4.4. video

4.1.2.4.5. how hand/finger move through data

4.1.3. poor interface design

4.1.3.1. won't use

4.1.3.2. make another choice

4.1.3.3. go to other site

4.1.4. multiple device

4.1.4.1. same format

4.1.4.2. same action

4.1.4.3. same layout

4.1.4.4. prior experience

4.1.4.5. already know it should be like that

4.1.5. core principles

4.1.5.1. progressive disclosure

4.1.5.1.1. simple to complex

4.1.5.1.2. necessary information is displayed when request/need

4.1.5.1.3. reduce anything distract from the need

4.1.5.2. intuitive

4.1.5.2.1. learn behaviors from experiences

4.1.5.2.2. single try and remember

4.1.5.3. consistency

4.1.5.4. predictablility

4.1.5.5. context + hierarchy

4.1.5.5.1. group together visually

4.1.5.5.2. order of important

4.1.5.5.3. separate

4.1.5.6. hick's law

4.1.5.6.1. many of choices

4.1.5.6.2. time require to make decision

4.1.5.6.3. choose nothing

4.2. navigation design

4.2.1. allow user to move through task / information intuitively

4.2.2. start with site map

4.2.3. trunk test

4.2.3.1. can answer when lost

4.2.3.1.1. strong sense of place

4.2.3.1.2. correct expectation

4.2.3.1.3. predict outcome

4.2.3.2. blindfold and dropped of at random place

4.2.4. revealing depth

4.2.4.1. Dynamic sub-menus

4.2.4.1.1. hover state

4.2.4.2. search results

4.2.4.3. provide feedback

4.2.5. information scent

4.2.5.1. catagories

4.2.6. path

4.2.6.1. back out

4.2.6.2. navigate to a known location

4.2.6.2.1. back to home page

4.2.6.3. contextual links

4.2.6.3.1. clue to go somewhere

4.2.7. icon and labels

4.2.7.1. representation icons

4.2.7.1.1. learn by familiar

4.2.7.1.2. clear meaning

4.2.7.2. Abstract icons

4.2.7.2.1. learn by experience

4.2.7.2.2. require context

4.2.7.3. use solid navigation

4.2.7.3.1. use meaningful labels

4.2.7.3.2. reduce memory load

4.2.7.3.3. cognitive

4.2.8. be consistent

4.2.8.1. not do

4.2.8.1.1. rearrange order

4.2.8.1.2. appear and disappear

4.2.8.1.3. move to different location

4.2.8.2. stay in same layout

4.2.8.2.1. only content change

4.2.8.3. stay in same behavior

4.2.8.4. familiar

4.2.9. convention

4.2.9.1. be standard

4.2.9.1.1. what to look for

4.2.9.1.2. where to look for

4.2.9.1.3. easy to pick from everything

4.2.9.1.4. no more frustrating if link is broken

4.2.9.2. standard place

4.2.9.2.1. locate them quickly

4.2.9.2.2. used to see it before

4.2.10. metaphors

4.2.10.1. visual cues

4.2.10.1.1. explan

4.2.10.2. recognize

4.2.10.2.1. day to day life

4.2.10.2.2. same as real world object

4.2.10.3. game and entertainment app is great to use

4.2.10.3.1. show as bookself

4.2.10.3.2. show as DJ stand

4.2.10.3.3. show as credit card list

4.2.10.4. obvious

4.2.10.5. use with caution

4.2.10.5.1. culturally subjective

4.2.10.5.2. require mental effort

4.2.10.5.3. obscure

4.2.10.5.4. universal understanding are hard to come by

4.3. information design

4.3.1. tie everything together

4.3.2. invisible

4.3.3. group

4.3.4. arranged

4.3.4.1. context

4.3.4.1.1. order as expectation

4.3.4.1.2. alphabetical

4.3.4.1.3. categorical

4.3.4.1.4. continuum

4.3.4.1.5. location

4.3.4.1.6. time

4.3.5. appropriate form

4.3.5.1. easy to digest

4.3.5.2. easy to understand

4.3.5.3. presentation

4.3.5.3.1. bar chart

4.3.5.3.2. decision making

4.3.5.4. five path essay

4.3.5.4.1. introduction

4.3.5.4.2. narration

4.3.5.4.3. affirmation

4.3.5.4.4. negation

4.3.5.4.5. conclusion

4.3.5.5. inverted pyramid

4.3.5.5.1. reveal only the need information when request

4.3.5.5.2. most critical information

4.3.5.5.3. helpful but not critical

4.3.5.5.4. nice to know

4.3.5.6. occam's razor

4.3.5.6.1. simple model

4.3.5.7. progressive disclosure

4.3.5.8. hick's law

4.3.5.8.1. criteria filter is need

4.3.5.9. simple

4.3.5.9.1. maximize signal

4.3.5.9.2. minimize noise

4.4. wireframes

4.4.1. show priority on screen

4.4.2. how people go through the site/app

4.4.3. basic layout

4.4.4. how interact with

4.4.4.1. interaction sequence

4.4.5. navigate frame

4.4.6. finish looking rough sketch

4.4.7. level of details

4.4.7.1. don't care

4.4.7.1.1. images

4.4.7.1.2. font

4.4.7.1.3. color

4.4.7.1.4. look and feel

4.4.7.2. care

4.4.7.2.1. content

4.4.8. sketching

4.4.8.1. the must

4.4.8.2. quickly generate thumbnail

4.4.8.3. 60 second and move on

4.4.8.4. many different idea as possible

4.4.8.5. no think much

4.4.8.6. rapid prototyping

4.4.8.6.1. use appropriate tools

4.4.8.6.2. no "lorem ipsum" text

4.4.8.6.3. just label, button, navigate element

4.4.8.6.4. not final design

4.4.8.6.5. always change

4.4.8.6.6. create , go back , review

4.4.8.6.7. related content

4.4.8.6.8. match user's need or expectation

5. SURFACE

5.1. visual design

5.1.1. look and feel

5.1.2. guide user through data , task, information

5.1.3. reduce cognitive load

5.1.4. enable recognition

5.1.5. increase intuitive learning

5.1.6. culturally/socially appropriate

5.1.7. following the eye

5.1.7.1. F Pattern

5.1.7.2. Z Pattern

5.1.7.3. from top to bottom

5.1.7.4. just an idea, not accurate

5.1.8. contrast

5.1.8.1. draw user attention

5.1.8.2. understand relationship

5.1.8.3. stand out

5.1.9. uniformity

5.1.9.1. layout stay the same

5.1.9.2. content change

5.1.9.3. keeping element from overwhelming

5.1.10. consistency

5.1.10.1. external inconsistency

5.1.10.1.1. when time pass

5.1.10.1.2. same pattern or layout

5.1.10.1.3. same orientation

5.1.10.1.4. multiple device

5.1.10.2. internal inconsistency

5.1.10.2.1. same product

5.1.10.2.2. inside app/site

5.1.10.2.3. same feeling

5.1.11. color

5.1.11.1. emotional response

5.1.11.2. meanings

5.1.11.2.1. associated

5.1.11.2.2. confusion

5.1.11.2.3. symbolic

5.1.11.3. optical fatique

5.1.11.4. readablility

5.1.11.5. sustains visual interest

5.1.11.6. highlight

5.1.11.7. guide

5.1.11.8. one dominate neutral color

5.1.11.9. add some accent color

5.1.11.10. can interfere hierarchy and content

5.1.11.11. what about who color blind

5.1.12. typography

5.1.12.1. sans

5.1.12.2. serif

5.1.12.3. use it purposefully

5.1.12.4. different information , different style

5.1.12.5. weight

5.1.12.5.1. bold

5.1.12.5.2. regular

5.1.12.5.3. for catalog

5.1.12.6. draw user attention

5.1.12.6.1. contrast

5.1.12.7. consistent styling

5.1.12.8. apply styles consistently

5.2. visible language

5.2.1. layout

5.2.2. typography

5.2.3. color

5.2.4. imagery

5.2.5. sequencing

5.2.5.1. visual storytelling

5.2.6. visual identity

5.2.7. principle of UI design

5.2.7.1. Organize

5.2.7.1.1. clear

5.2.7.1.2. consistency

5.2.7.1.3. conceptual structure

5.2.7.1.4. visual hierarchy

5.2.7.2. Economize

5.2.7.2.1. least amount of cues

5.2.7.2.2. do most

5.2.7.3. Communicate

5.2.7.3.1. expectation

5.2.7.3.2. capablilities

5.2.7.3.3. pattern recognition

5.2.7.4. user

6. factor of plane

6.1. plane effect another plane

6.2. each plane need to be flexible

6.2.1. overlap each plane to see what plane effect what

6.2.2. two inform each other

6.3. content is the king

6.3.1. user want

6.3.2. relevant to the reason they are there

6.3.3. catalog , track , present on when , where, how the user want

6.4. technology support to delivery great experience

6.4.1. across multiple deice , OS , browser

6.4.2. inherit how we design

6.4.3. touchscreen have changed the way to navigate