한국어
← All categories
09

UX process & deliverables

This is where contract disputes usually start. Without the difference between a wireframe, a mockup and a prototype, there is no way to agree what "up to the design" includes.

32 terms32 live demos
Keep these three straight

Wireframe (structure only) → mockup (a still screen with the visual design applied) → prototype (clickable, moves between screens). Spell out in the contract which one you are delivering.

01

Information Architecture

IA · 정보구조

When this comes up

"Could you just start with the screens?" — the step to defend when someone proposes skipping it.

The work of deciding how information is classified and where it goes. The same job as deciding which shelf a library book belongs on.

See it Try clicking
Home

— main banner · recommended · new in

Products

— category list → product list → product detail

My page

— orders · saved items · account settings

Easy to get wrong

This happens before any screen is drawn. Draw screens without it and you end up asking "why is this menu here?" and redoing everything. Clients often push to skip IA on agency work — the time saved here comes back threefold later.

Ask for it like this

I will settle the information architecture before starting on screens. Drawing mockups before the menu structure and page list are confirmed means redrawing everything when the structure changes. One or two days is enough.

Related terms
02

Sitemap

사이트맵

When this comes up

"How many pages are there in total?" — the document that the quote is based on.

A map of the entire page structure drawn as a tree.

See it Try clicking
Home
├─ About
├─ Products
│   ├─ List
│   └─ Detail
├─ Support
│   ├─ Announcements
│   └─ FAQ
└─ My page
Easy to get wrong

The page count in the sitemap is frequently the basis of the quote. Confirm it before signing, and state that pages added later are a separate negotiation.

Ask for it like this

I will confirm the full page list through the sitemap. This list is the basis of the quote, and pages added afterwards are subject to separate agreement. Please include the admin pages if they are needed.

03

Depth

뎁스 · 계층 깊이

When this comes up

"Only go two levels deep" — when limiting menu hierarchy.

The number of levels in a menu or screen hierarchy. Home is level 1, the level below it is level 2.

See it Try clicking
Level 1 — home
Level 2 — product list
Level 3 — product detail
Level 4 — very few people get this far
Easy to get wrong

Korean industry usage. "Only two levels" means make everything reachable within two clicks. The deeper it goes, the more sharply people fail to arrive.

Ask for it like this

Please limit the menu structure to three levels. Beyond that people stop finding things. Content that would need a fourth level should be reached by search or filtering instead.

04

User Flow

유저 플로우

When this comes up

"Where do they go if payment fails?" — a question that always arrives mid-build.

The sequence of screens and actions a person passes through to reach their goal.

See it Try clicking
Product detailCartPaymentDone
↳ if not signed in,prompt to sign in

A flow is only finished once the branch below is drawn too.

Easy to get wrong

Drawing only the happy path is doing half the job. Failure, cancellation, and leaving and coming back all need branches, or development will be stuck asking.

Ask for it like this

I will define the branches alongside the happy path when drawing the user flow — not signed in / payment failed / left partway and returned. Without those, development will keep coming back with questions.

05

Wireframe

와이어프레임

When this comes up

"When do we see the design?" — when a wireframe gets mistaken for one.

A low-fidelity plan showing structure and placement only, with no colour, imagery or typography. Drawn in grey boxes and lines.

See it Try clicking
Header · logo · menu
Card
Card
Card
Easy to get wrong

It is deliberately unattractive. Make it pretty and the client starts talking about colour and fonts, and the structure never gets discussed. Say up front: "this is not the design, it is for checking the structure".

Ask for it like this

What you are looking at is a wireframe. Colour and typography are not decided yet — please review only <b>what information goes where</b>. The design comes after this structure is confirmed.

06

Mockup

목업 · 시안

When this comes up

"So this is finished, right?" — when a mockup gets mistaken for a finished product.

A static finished screen with colour, imagery and typography all applied. It looks real but nothing happens when you press it.

See it Try clicking
Summer sale
Up to 50% off · until 30 July

The look is finished, but pressing the button does nothing.

Easy to get wrong

The stage between wireframe and prototype. The "design" shown to a client is usually a mockup. Seeing one often prompts "so it is done then?", so explain in advance.

Ask for it like this

This is a mockup — a static design. It does not actually respond to presses. If you need a working version, the prototype stage is separate.

07

Prototype

프로토타입

When this comes up

"Let me click through it" — a stage to check is inside the contracted scope.

A working design you can actually press to move between screens. Built by linking screens in a design tool, with no code.

See it Try clicking
Wireframe

structure only · greyscale · drawn fast and thrown away fast

Mockup

design finished · static · for client sign-off

Prototype

screens linked · clickable · for usability testing

Easy to get wrong

Telling wireframe / mockup / prototype apart matters enormously in agency contracts. "Includes the prototype" and "includes the design" are completely different amounts of work. State in the contract where it stops.

Ask for it like this

Let us confirm the deliverable scope — which of these do you need: ① wireframes (structure) ② mockups (static design) ③ a prototype (clickable navigation)? The prototype adds the screen-linking work.

08

Screen Definition · Storyboard

화면설계서 · 스토리보드

When this comes up

"Why is this feature missing?" — the yardstick for "if it is not in the document, it was not built".

A document setting out the components, behaviour, data and branches for each screen. The most important deliverable in Korean agency and SI work.

See it Try clicking
Header
① Search box
② Results list
Description
① Show autocomplete once 2+ characters are entered
② Show the empty state when there are no results
③ Page in units of 20
Easy to get wrong

It is the reference document that makes "not in this document" mean "not in scope". Developers build from it and QA verifies against it. Write it vaguely and a dispute is guaranteed.

Ask for it like this

Development and acceptance will both work from the screen definition document. Anything not in it is out of scope, so please raise any behaviour you need now. Items added after sign-off are a separate agreement.

09

Description

디스크립션 · 디스크

When this comes up

"Add descriptions" — when the drawing alone is not enough.

The written explanation of how each element behaves in a screen definition. Usually numbered alongside the screen.

See it Try clicking
✗ Not verifiable

Make search comfortable for users

✓ Verifiable

After 2+ characters, show up to 5 autocomplete results 0.3s later. When there are none, show "No results".

Easy to get wrong

"Add descriptions" means the picture alone is not enough — write the behaviour down. A good description is not "arranged attractively" but a verifiable sentence like "button is disabled when input is under 2 characters".

Ask for it like this

Please write descriptions as verifiable statements. Not "make it easy to use" but "after 2+ characters, show up to 5 autocomplete results 0.3s later" — something QA can check.

10

Design Draft

시안

When this comes up

"Give me three designs" — fail to clarify and the work triples.

The candidate designs presented to a client.

See it Try clicking
Option A
Option B
Option C
Easy to get wrong

Always clarify what "three designs" means. Three genuinely different concepts, or three colour variants of one concept? The work differs threefold. And state the number of revision rounds (usually two or three) in the contract or you fall into endless revisions.

Ask for it like this

Does "three designs" mean three distinct concepts, or three colour and layout variants of one concept? The former is three times the work. I would also suggest agreeing on two rounds of revision after the design is chosen.

11

Persona

페르소나

When this comes up

"Our target is women aged 20 to 40" — that is not a persona.

The representative user defined as a specific fictional person — name, age, occupation, goals and frustrations.

See it Try clicking
J
Jieun Kim · 32 · marketer
Goal — finish a grocery order in under 5 minutes on the commute
Friction — signing in takes too long, and last time's purchases are hard to find again
Easy to get wrong

"Women aged 20 to 40" is not a persona; it is demographics. It has to be specific enough to make design decisions from: "a 32-year-old office worker who wants to finish an order in under five minutes on the morning commute".

Ask for it like this

Could we make the target a persona rather than demographics — when, in what situation, and to do what does this person open our service? That is what lets us set screen priorities.

12

Customer Journey Map

고객 여정 지도 · CJM

When this comes up

"We fixed the screens and drop-off has not moved" — when the problem is outside the screen.

A map of the experience in time order, from hearing about the service → trying it → continuing to use it.

See it Try clicking
Awareness
Ad
Exploring
Search
Sign-up
heavy drop-off
Purchase
Payment
Return
Notification

The yellow stretch is the pain point. Fixing that is the priority.

Easy to get wrong

It covers beyond the product itself, not just screens — seeing the ad, waiting for delivery, calling support. It is the tool for finding problems that fixing screens cannot solve.

Ask for it like this

The cause of the drop-off may sit outside the screens. I would suggest mapping the customer journey from ad through to return visit first, and identifying which stage loses the most people.

Related terms
13

Pain Point

페인 포인트

When this comes up

"This part feels awkward" — you need evidence to be persuasive.

The friction, obstacles and irritations people run into.

See it Try clicking
!No postcode lookup on the address field, so it all has to be typed
!The cart empties when payment fails
Easy to get wrong

"It is awkward" has to be an observation, not an impression. Not "sign-up is awkward" but "62% drop out at step 2 of 3" — evidence is what makes it persuasive.

Ask for it like this

I will document pain points as data rather than impressions — not "looks awkward" but "62% drop out at step 2". That is what lets us decide what to fix first.

14

Usability Test

사용성 테스트 · UT

When this comes up

"Is this actually easy to use?" — when you need a way to find out.

A validation method where you give real users a task and watch them do it.

See it Try clicking
Task — "add a white shirt to the cart on this site"
Observed — 4 of 5 could not find the category menu
Change — keep the search box visible at the top at all times
Easy to get wrong

Testing just five people surfaces roughly 85% of the problems (Nielsen). You do not need a crowd. What matters is watching without helping. The moment you say "press that one there", the test is worthless.

Ask for it like this

I will run a usability test with five people — give them tasks and observe without helping. Half a day is enough, and I will prioritise the problems it surfaces.

15

Heuristic Evaluation

휴리스틱 평가

When this comes up

"Recruiting users is hard, but I want it validated"

An expert reviewing screens against a fixed list of principles. No users required.

See it Try clicking
1. Is system status visible (loading, progress)
2. Does it use real-world language (no jargon)
3. Can it be undone (cancel, undo)
4. Is it consistent
5. Does it prevent mistakes
… through to 10
Easy to get wrong

Nielsen's ten usability heuristics are the de facto checklist. Faster and cheaper than a usability test, but it cannot catch the unexpected things real users do. Best used alongside one.

Ask for it like this

If recruiting users is difficult, let us start with a heuristic evaluation. Reviewing the screens against Nielsen's ten principles filters out the obvious problems, and then we only need a usability test for what is left.

16

A/B Test

A/B 테스트

When this comes up

"I cannot tell which is better" — when you want data to decide.

Showing two versions to different groups and comparing the results.

See it Try clicking
Option A

Conversion 2.1%

Option B · winner

Conversion 3.4%

Easy to get wrong

It only means anything with a large enough sample. On a site with 100 visitors a day, an A/B test is usually meaningless. And change only one thing at a time or you cannot tell what caused what.

Ask for it like this

An A/B test needs at least a few thousand visitors a day for the result to mean anything. That is not feasible at current traffic — a five-person usability test to catch the obvious problems would be more efficient.

17

Funnel

퍼널 · 전환 깔때기

When this comes up

"I want to increase revenue" — when deciding what to fix.

A view of how many people remain at each stage from arrival to the final goal. It narrows towards the bottom, like a funnel.

See it Try clicking
Visits 10,000
Product views 4,200
Cart 980 ← biggest drop-off
Purchases 310
Easy to get wrong

The point is finding the stage that loses the most people. Fixing one drop-off point affects revenue far more than making screens prettier.

Ask for it like this

Before improving everything, let us look at the funnel. Checking the drop-off rate at each stage — visit → view → cart → purchase — and concentrating on the worst one will have far more effect.

18

CVR · Bounce Rate · Retention

전환율 · 이탈률 · 리텐션

When this comes up

When a client brings up results. Answering in this language changes how persuasive you are.

Conversion rate is the share who complete the goal, bounce rate the share who leave after one page, and retention the share who come back.

See it Try clicking
3.1%
Conversion
48%
Bounce rate
22%
30-day retention
Easy to get wrong

This is the language clients use to talk about results. Being able to explain a design proposal in these terms changes everything about how it lands. "It will reduce cart abandonment" is far stronger than "it will look nicer".

Ask for it like this

The purpose of this change is not "it looks nicer" — it is to lower the drop-off rate at the cart stage. I would suggest measuring the conversion rate for that stage after it ships to confirm the effect.

19

Minimum Viable Product

MVP

When this comes up

When requirements keep growing — the negotiating card for holding scope.

The smallest product carrying only the core features. Not a finished product, but the minimum needed to find out whether the idea works.

See it Try clicking
✗ The misunderstanding

wheels → body → engine → car
nothing is usable in between

✓ MVP

scooter → bicycle → motorbike → car
every stage gets you somewhere

Easy to get wrong

The key word in agency scope negotiation. When requirements keep growing, "let us push that past the MVP, ship first and see the response" holds the line. An MVP is built small, not built carelessly.

Ask for it like this

I would suggest pushing that feature past the MVP. Shipping the core features first, seeing how people actually respond, and adding it once we know it is needed saves both cost and time.

20

Affordance

어포던스

When this comes up

"I cannot tell whether this is pressable"

The action possibilities an object offers. A handle affords grasping; a button affords pressing.

See it Try clicking
Looks pressable ✓
Does not look pressable ✗
OK
Easy to get wrong

In practice people mostly use it interchangeably with signifier. "Give it affordance" really means "make it look pressable", which is strictly a signifier. Just knowing that is enough.

Ask for it like this

It is not visible that this element is clickable. Please give it a background, a border or a cursor change so it looks pressable.

Related terms
21

Signifier

시그니파이어

When this comes up

"It is clickable but it does not look clickable" — the name for exactly that.

The visual cue announcing that an action is possible. Blue underlined text signifying "link" is a signifier.

See it Try clicking

This is a link that looks like a link, and this is a link that does not look like one.

If the second one is actually clickable, it has no signifier.

Easy to get wrong

Coined by Donald Norman to separate it from affordance. When "what is possible" (affordance) and "what looks possible" (signifier) diverge, people get lost. A button that works but looks inert is the example.

Ask for it like this

Please underline links as well as colouring them. Colour alone leaves colour-blind users unable to tell that it is a link.

Related terms
22

Mental Model

멘탈 모델

When this comes up

"Make it original" — why inverting the structure is risky.

The expectation people already hold about how something will work.

See it Try clicking
Click the logo → go home
Cart icon → top right
Click the logo → go to the About page (not what was expected)
Easy to get wrong

Go against those expectations and it feels awkward however well it is built. The reason the cart icon is top-right, the reason the logo goes home — all mental models. This is not the place to be creative.

Ask for it like this

Going home when the logo is clicked is something people simply expect. Sending them to the About page causes confusion. It is safer to differentiate through visuals and content rather than structure.

Related terms
23

Cognitive Load

인지 부하

When this comes up

"I do not know what I am supposed to do" — when a screen is too busy.

The amount of mental effort needed to understand a screen.

See it Try clicking
✗ High load

8 buttons, inconsistent wording, no clear next step

✓ Low load

one main action, familiar wording, a clear next step

Easy to get wrong

Many options, difficult wording and inconsistent rules all raise it. "Don't Make Me Think" is the classic principle in this area.

Ask for it like this

There are too many options on this screen and the cognitive load is high. I would suggest emphasising one main action and collapsing or demoting the rest, to reduce how much is visible at once.

24

Hick's Law

힉의 법칙

When this comes up

The evidence to cite when arguing for fewer menu items.

The principle that more options means longer to decide.

See it Try clicking
12 options

longer to decide on average · more drop-off

3 recommended + more

quick decision · expand if needed

Easy to get wrong

The evidence for cutting menus. That said, cutting for the sake of it is not the answer — the point is classifying well so that fewer things are visible at once.

Ask for it like this

With 12 menu items, choosing takes longer (Hick's Law). Rather than removing items, I would suggest grouping them into three or four sets to reduce how many are visible at once.

25

Fitts's Law

피츠의 법칙

When this comes up

The scientific basis for deciding button size and position.

The principle that larger and closer targets are faster to hit.

See it Try clicking
vs

The right one is much faster and more accurate to hit.

Easy to get wrong

The scientific basis for button size and placement. It is why important buttons sit at the bottom of a phone screen where the thumb reaches, and why a "delete" button that must not be hit by accident is placed away from the others.

Ask for it like this

Please move the main CTA to a fixed position at the bottom of the screen on mobile — that is the thumb zone, so it is easier to hit. Also keep the delete button at least 16px from other buttons to prevent mistakes.

26

Jakob's Law

제이콥의 법칙

When this comes up

The answer to "why can we not just invent a new way of doing it?"

The principle that people expect your site to work like the other sites they use.

See it Try clicking
· logo top left → press it and you go home
· cart top right
· search is a magnifying glass
· close is an X, top right
Invert these and the site is not "original" — it is awkward.
Easy to get wrong

The answer to "why not do something new?" People spend far more time on other sites than on yours. Following familiar patterns is usually right. Differentiate through content and visuals, not structure.

Ask for it like this

I would suggest following familiar patterns for the navigation structure (Jakob's Law). People spend more time on other sites, so inverting the structure reads as awkward rather than original. We can differentiate through visuals and content.

27

Gestalt Principles

게슈탈트 원리

When this comes up

The theoretical basis for "why did you leave this much space?"

Principles about how people group things perceptually — proximity, similarity, closure, continuity and others.

See it Try clicking
✗ Equal spacing
Name
Email
✓ Pairs kept close
Name
Email
Easy to get wrong

The theoretical basis for "why this much space?" Things close together read as one group (proximity). The gap between a label and its field has to be smaller than the gap to the next item for them to read as a pair.

Ask for it like this

Please tighten the gap between label and field to 4px and open the gap between items to 16px. They are currently equal, which makes it hard to tell which label belongs to which field.

28

F Pattern · Z Pattern

F 패턴 · Z 패턴

When this comes up

"Where should the important thing go?" — setting placement priority.

The paths the eye takes across a screen. Text-heavy pages are scanned in an F shape, simple landing pages in a Z.

See it Try clicking
F
Text-heavy page
Z
Simple landing page
Easy to get wrong

The reason to put important things top-left and in the first two lines. People scan rather than read. Short subheadings and lists land far better than long sentences.

Ask for it like this

Please place the core message top-left and within the first two lines. People scan in an F pattern, so anything lower down goes unread. Break long paragraphs into subheadings and lists.

29

UX Writing · Microcopy

UX 라이팅 · 마이크로카피

When this comes up

"I want better results without changing the design"

The work of designing short pieces of text — button labels, guidance, error messages.

See it Try clicking
✗ A bad error message

An error occurred. (E-4012)

✓ A good error message

Please check the card number. All 16 digits are required.

Easy to get wrong

An area that can lift results substantially without touching the design. Changing "OK" to "Start for free" alone shifts conversion. Error messages must carry ① what went wrong ② what to do about it.

Ask for it like this

Please rewrite the error messages. Drop the technical code ("E-4012") and cover two things: what went wrong and what to do. For example: "Please check the card number — all 16 digits are required."

Related terms
30

Onboarding

온보딩

When this comes up

"I want to explain it to first-time visitors"

The process of helping a first-time user understand the service and reach a first success.

See it Try clicking
Welcome!
Shall we create your first project? It takes a minute.
Easy to get wrong

Onboarding is not explaining a lot. Getting someone to actually do something on the first screen beats five tutorial slides. And skip must always be available.

Ask for it like this

Rather than several explanation slides, make the onboarding get people doing one thing on the first screen. Keep the skip button visible at all times, and provide a way to see it again later.

31

Coach Mark

코치마크 · 툴팁 투어

When this comes up

"I want to point out that this feature exists" — a method that is terrible when overused.

Guidance overlaid on the screen pointing out "this button does this".

See it Try clicking
Press here to
write a new post

It leaves only the highlighted element lit and covers everything else.

Easy to get wrong

Terrible when overused. Make someone dismiss five in a row on arrival and nobody reads any of them. Point out one or two genuinely hard-to-find features and provide a way to see them again.

Ask for it like this

Use coach marks for only one or two genuinely hard-to-find features. Five in a row and nobody reads them. Include a "do not show again" option.

Related terms
32

Dark Pattern

다크 패턴 · 기만적 설계

When this comes up

"Make the decline button less visible" — a request to refuse.

Design that deceives or confuses people into doing something they did not want to do.

See it Try clicking
✗ Dark pattern

the decline button is deliberately small and faint

✓ Honest design

both options presented equally

Easy to get wrong

Regulated in Korea under the amended e-commerce act. Hidden auto-renewals, structures that make cancelling difficult, and greying out the decline button all qualify. Even when a client asks for it, the right move is to explain the legal risk and propose an alternative.

Ask for it like this

Greying out the decline button qualifies as a dark pattern under e-commerce law and could attract enforcement. I would suggest presenting both options equally and strengthening the benefit copy instead.