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.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 making money ROI Save money 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 stakeholder ask question B2B user ask question ( role ) ask question (need)

1.5.2. review competitor

1.5.3. research 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 everybody understand in the same way

1.6.3. find value to provide target customer what experience they have how is offer different from competitor / substitute

1.7. user expectations

1.7.1. first use what is it is this expect to see look credible and trustworthy offer what I want 3 sec decision before quit valuable enough to be stick around what i can do when here how do I learn more how to contact someone

1.8. things to remember (conclusion)

1.8.1. clear roadmap

1.8.2. clear strategy technology decision screen look like/arrangement arragement 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.1. function specification

2.1.1. feature set of product new feature must support strategy often present as good idea almost emerge after project underway clear declaration identify what to do right now identify what "NOT" to do right now sprint planning

2.1.2. what's we creating

2.1.3. too big can't delivery in time make another choices/bargain Nervous design / dev

2.1.4. too small unclear path to full vision unimpressive feeling to do for customer

2.1.5. start from why to what things people say they need false need things people actually need false need things they don't know they need new idea brainstroming false need

2.1.6. create useful specification user scenarioes high level diagram all scenario can group if same storyboard share and discuss generate to each requirement/feature be positive sentense system will suggest .. not allow user to.. be specific word/feature eg. specific people be objective hip and cool 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 different type can work together

2.2.3. major impact on UXD decision format purpose size performance bandwidth resource person in-charge of video images need other people to involve

2.2.4. should be strategic fit business fit user delivery method streming download material style & structure arrangement formal or strict culture or hip organize prioritize subject & substance tell something they need to know value to customer / not us 3 sec to delivery to customer validate content feature against project's strategic objective inappropriate content content resource do much more to save time of next plane

2.2.5. contextual physical activity device disabilities activity habit emotional stress desire need cognitive ability to learn suitable for all education

2.2.6. 3 attribute useful sellable 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 easy to understand understand in the same page

2.4.3. don't be epic, just common understand scheduler milestone 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 problem grow unable to control 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 focus of what business do ikea is the good example constaint

2.8. delivering continuous value

2.8.1. versions evolve and integrate new experience new feature/function long WOW identify touch point for delivery keep adding new feature differ from competitor ( unmet need) repeatable delivery process 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 most of requirement are feature/solution , not problem/need state the need first brainstorming objective functional non-functional 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.1. interaction design (IXD)

3.1.1. structure experience of pattern and sequence that present appropriate option to users user can interact with

3.1.2. dancing in step user system moving along the same path response interact functionality help to meet user goal inform state changes prevent error mistake

3.1.3. principles consistent visually remain same context change only link to other page inside control pattern behavior voice design pattern predictable preview sense of place , expectation learnable learn from experience single trial learning gesture visible Discoverability content hinting opportunity to interact is avaliable click and tap touch and gesture feedback location status Future state outcome/result immediate reaction acknowledge interactions error prevention

3.2. information architecture

3.2.1. define volume of content , how to organized , arranged , prioritized search manipulate organization navigational educating infoming persuading flexible

3.2.2. type of information architecture hierarchical tree standard organize complicate structure multi-faceted navigation hub and spoke central index start from central can't navigate between spoke nested list linear navigation quick easy strong sense of where we are need to bear for exploring dashboard seem like hub and spoke preview of chart filters view did search get result suitable for huge content 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 do it one time remember forever

3.3.5. flexible reorganize 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 diagramming/hierarchy structure in workflow diamgram hub and spoke diagram relationship between content diagram (from left to right)


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 give things people they want/need give them when and why they want format they can access all form organization layout audio video how hand/finger move through data

4.1.3. poor interface design won't use make another choice go to other site

4.1.4. multiple device same format same action same layout prior experience already know it should be like that

4.1.5. core principles progressive disclosure simple to complex necessary information is displayed when request/need reduce anything distract from the need intuitive learn behaviors from experiences single try and remember consistency predictablility context + hierarchy group together visually order of important separate hick's law many of choices time require to make decision 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 can answer when lost strong sense of place correct expectation predict outcome blindfold and dropped of at random place

4.2.4. revealing depth Dynamic sub-menus hover state search results provide feedback

4.2.5. information scent catagories

4.2.6. path back out navigate to a known location back to home page contextual links clue to go somewhere

4.2.7. icon and labels representation icons learn by familiar clear meaning Abstract icons learn by experience require context use solid navigation use meaningful labels reduce memory load cognitive

4.2.8. be consistent not do rearrange order appear and disappear move to different location stay in same layout only content change stay in same behavior familiar

4.2.9. convention be standard what to look for where to look for easy to pick from everything no more frustrating if link is broken standard place locate them quickly used to see it before

4.2.10. metaphors visual cues explan recognize day to day life same as real world object game and entertainment app is great to use show as bookself show as DJ stand show as credit card list obvious use with caution culturally subjective require mental effort obscure 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 context order as expectation alphabetical categorical continuum location time

4.3.5. appropriate form easy to digest easy to understand presentation bar chart decision making five path essay introduction narration affirmation negation conclusion inverted pyramid reveal only the need information when request most critical information helpful but not critical nice to know occam's razor simple model progressive disclosure hick's law criteria filter is need simple maximize signal 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 interaction sequence

4.4.5. navigate frame

4.4.6. finish looking rough sketch

4.4.7. level of details don't care images font color look and feel care content

4.4.8. sketching the must quickly generate thumbnail 60 second and move on many different idea as possible no think much rapid prototyping use appropriate tools no "lorem ipsum" text just label, button, navigate element not final design always change create , go back , review related content match user's need or expectation


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 F Pattern Z Pattern from top to bottom just an idea, not accurate

5.1.8. contrast draw user attention understand relationship stand out

5.1.9. uniformity layout stay the same content change keeping element from overwhelming

5.1.10. consistency external inconsistency when time pass same pattern or layout same orientation multiple device internal inconsistency same product inside app/site same feeling

5.1.11. color emotional response meanings associated confusion symbolic optical fatique readablility sustains visual interest highlight guide one dominate neutral color add some accent color can interfere hierarchy and content what about who color blind

5.1.12. typography sans serif use it purposefully different information , different style weight bold regular for catalog draw user attention contrast consistent styling 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 visual storytelling

5.2.6. visual identity

5.2.7. principle of UI design Organize clear consistency conceptual structure visual hierarchy Economize least amount of cues do most Communicate expectation capablilities pattern recognition 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