LinkedIn Learning의 크리스 노더(Chris Nodder) 강사가 진행하는 "전자상거래를 위한 인터랙션 디자인(Interaction Design for E-commerce)" 강의는 사용자 중심의 전자상거래 경험을 설계하는 데 필요한 핵심 원칙과 실용적인 전략을 다룹니다. 이 강의는 UX 디자이너, 제품 관리자, 온라인 쇼핑몰 운영자 등 전자상거래 플랫폼을 개선하고자 하는 분들에게 유용합니다.
📌 강의 개요
1. 온라인 쇼핑 행동 이해하기
- 사용자들이 온라인에서 어떻게 구매 결정을 내리는지 분석합니다.
- B2B 전자상거래 및 옴니채널 전략의 차이점을 설명합니다.
- 팬데믹과 같은 외부 요인이 소비자 행동에 미치는 영향을 다룹니다.
2. 사이트 목표 설정과 사용자 지원
- 사용자의 의사결정을 돕는 콘텐츠와 기능을 설계하는 방법을 소개합니다.
- 구매를 유도하는 설득 전략과 구매 후 지원 방안을 설명합니다.
- 이메일, 알림 등 사이트 외부 커뮤니케이션의 역할을 강조합니다.
3. 전자상거래 디자인 가이드라인
- 홈페이지, 검색 및 탐색, 카테고리 페이지, 제품 상세 페이지, 장바구니, 체크아웃 등 주요 페이지의 디자인 원칙을 다룹니다.
- 선물 찾기 도구, 위시리스트, 기프트 카드 등의 기능 설계를 설명합니다.
4. 효과적인 팀 구성과 변화 구현
- 브랜드와 고객 경험을 지원하는 팀 구성 방법을 소개합니다.
- 사용자 여정 맵과 서비스 맵을 활용한 문제점 식별과 개선 방안을 설명합니다.
- 변화의 테스트와 구현을 위한 전략을 제시합니다.
강사 소개: 크리스 노더 (Chris Nodder)
크리스 노더는 UX 컨설턴트이자 'Chris Nodder Consulting LLC'의 설립자입니다. 그는 Nielsen Norman Group의 전 이사로서, 25년 이상의 UX 연구 및 디자인 경험을 보유하고 있으며, Evil by Design 등의 저서를 집필했습니다
🔗 강의 수강 링크
강의는 LinkedIn Learning에서 수강하실 수 있습니다: Interaction Design for E-commerce
Interaction Design for Ecommerce | LinkedIn Learning (이전 이름: Lynda.com)
Learn how to approach user interaction—and satisfaction—with ecommerce apps and websites from a user experience professional.
www.linkedin.com
1. What Makes a Good Web User Experience?
1. Users Come with a Goal
대부분의 사용자는 오락이 아닌 정보를 찾기 위해 웹사이트를 방문합니다.
보통 검색 엔진이나 링크를 통해 유입되며, 직접 URL을 입력하지는 않습니다.
방문자는 구체적인 목표를 갖고 오므로, 사용자가 빠르고 명확하게 그 목표를 달성하도록 돕는 것이 핵심입니다.
2. Establish Clarity & Orientation on Every Page
| 사이트 태그라인 | 기대감을 즉시 전달 | “The trusted source for skincare” |
| 명확한 내비게이션 | 무엇을 할 수 있고 찾을 수 있는지 제시 | “Shop”, “Track Order”, “Customer Support” |
| 페이지 제목 & 요약 | 해당 페이지가 무엇에 관한 것인지 설명 | “Spring 2025 Trend Guide” |
| 맥락이 있는 시각 자료 | 의미를 강화 (장식이 아님) | 꽃다발 이미지를 보여주는 플로리스트 사이트 |
3. Why Users Leave (Common Pitfalls)
| 모호하거나 전문 용어 남용 | 사용자가 이해하거나 공감하기 어려움 | 간단하고 인지 가능한 라벨 사용 |
| 불분명한 링크 텍스트 | 클릭했을 때 무엇이 나올지 알 수 없음 | 구체적이고 행동 중심적인 링크 텍스트 작성 |
| 너무 많은 본문 텍스트 | 스캔이 어렵고 시선이 흐려짐 | 소제목, 불릿, 여백 활용 |
| 산만한 광고 | 사용자 경험을 방해하고 혼란을 유발 | 연관성 있고 균형 잡힌 광고만 보여주기 |
4. Make Your Content Concise and Purposeful
웹 콘텐츠는 인쇄 스타일보다 50% 짧아야 합니다.
모든 요소는 기능적인 목적을 가져야 하며, 장식적이거나 관련 없는 것은 제거해야 합니다.
✅ 적절한 시각 자료: 제품, 분위기, 맥락을 설명하는 이미지
❌ 스톡 이미지: 웃고 있는 일반적인 인물 사진 등 의미 없는 시각 자료는 지양
5. Consistency Is UX Superpower
| 링크 동작 | 항상 새 페이지로 연결 | 팝업이나 예기치 않은 형식은 피하기 |
| 내비게이션 메뉴 | 모든 페이지에서 동일하게 유지 | 사용자의 방향 감각과 맥락 이해에 도움 |
| 용어 사용 | 사이트 전반에 걸쳐 일관된 명칭 사용 | “Chat Room” ≠ “Forum” ≠ “Den” |
| 표준 레이블 | “About Us”, “Contact” 등 통용되는 명칭 사용 | 사용자가 원하는 정보를 직관적으로 찾을 수 있음 |
6. Standard Design Wins
사용자는 귀하의 사이트보다 다른 사이트에서 더 많은 시간을 보냅니다.
따라서 그들이 익숙한 레이아웃, 버튼, 행동 방식을 사용하는 것이 좋습니다.
혁신은 콘텐츠에서, 구조나 내비게이션에서는 하지 마세요.
✅ 브라우저 & 모바일 호환성 향상
✅ 신규 사용자에게 혼란을 줄이기 쉬움
7. Final Takeaways
- 사용자는 콘텐츠를 보러 왔지, 독창적인 레이아웃을 보러 온 것이 아닙니다.
- 원하는 정보를 빠르게 찾지 못하면 뒤로 가기 버튼을 누릅니다.
- 단순하고 일관되며, 사용자 목표에 집중된 디자인이 핵심입니다.
- 자문해보세요:
- “이 요소가 사용자의 정보 탐색을 **돕고 있는가, 방해하고 있는가?”
2. Creating Good Content
1. Content Should Drive Design, Not the Other Way Around
시각 디자인을 먼저 시작하면 콘텐츠가 맞지 않는 레이아웃에 끼워 맞춰질 수 있습니다.
Lorem Ipsum 같은 더미 텍스트는 시각 요소에 집중하는 데는 좋지만, 실제 콘텐츠 요구사항을 반영하지 못합니다.
다음 질문을 먼저 던져야 합니다:
- 제목 길이에 맞는 공간이 충분한가?
- 이미지의 비율은 어떠한가?
- 텍스트 중심인가, 이미지 중심인가?
- 콘텐츠 구조는 작업별, 카테고리별, 대상별 중 어떤 방식인가?
✅ 콘텐츠의 유형, 톤, 구조, 양을 먼저 정의하면 디자인이 더 쉬워집니다.
2. How People Actually Read on the Web
사람들은 단어 하나하나를 읽지 않고 스캔합니다.
키워드나 시각적 힌트를 통해 자신에게 필요한 콘텐츠인지 파악합니다.
아이 트래킹 연구 결과 (F-패턴):
- 첫 번째 가로줄을 읽고
- 왼쪽 세로로 내려가며
- 가끔 가로로 점프
| 첫 문단이 가장 많은 주목을 받음 | 요약부터 시작하기 |
| 소제목과 리스트가 읽힘 | 스캔 가능한 포맷 사용 |
| 처음 11자에 집중됨 | 키워드 앞에 배치하기 |
| 불필요한 단어는 건너뜀 | 언어 단순화 |
3. The Inverted Pyramid Writing Style
| 결론 먼저 | 핵심 메시지를 바로 전달 |
| 핵심 정보 다음 | 주요 내용 보강 |
| 배경 및 세부 정보 마지막 | 필요 시 더 깊은 맥락 제공 |
✅ 목표 중심 사용자에게 정보를 빠르게 전달하고, 관심 있는 사람만 상세 읽기를 유도할 수 있습니다.
4. Writing for Comprehension & Accessibility
- 미국 성인의 43%가 기본 이하의 독해력 보유
- 비영어 사용자나 저독해 사용자 = 단어 하나하나를 읽음 → 단순한 구조 필요
- 웹에서의 독서는 인쇄물보다 25% 느리고, 평균적으로 20%만 읽음
🧠 해결책:
- 짧고 명확한 문장 작성
- 마케팅 과장, 불필요한 단어 제거
- 짧은 단어, 문단, 페이지
🧪 연구 인사이트:
텍스트가 복잡할수록 작성자의 지능을 낮게 평가함 (Daniel Oppenheimer, 프린스턴)
5. Formatting Techniques That Improve Usability
✅ Use Headings as Navigation Anchors
- 소제목은 네비게이션처럼 작용
- 사용자가 검색할 단어로 제목을 작성
- 최대 3단계 구조까지만—그 이상은 별도 페이지로 나누기
✅ Summaries for Every Page
- 첫 문단 = 페이지 전체 요약
- 검색 결과, 카테고리 설명, 미리보기 텍스트에 활용 가능
✅ Use Bullet and Numbered Lists
| ✅ 불릿 | 순서 없는 목록, 간단한 사실 나열 |
| ✅ 번호 목록 | 단계별 안내, 우선순위 순서 나열 |
- 항목은 짧고 간결하게
- 키워드로 시작해서 눈에 띄게
- 리스트는 사용자 시선을 끄는 강력한 형식
✅ Write Link Text That Informs
- ❌ “Click here” → 의미 없음
- ✅ 링크 키워드 자체로 정보 전달
- 예: “사이즈 차트 보기”
6. Content Reduction = Clarity Boost
- 인쇄물보다 50% 이상 텍스트 줄이기 가능
- 적은 텍스트 = 높은 이해도
- 사용자가 원하는 건:
- 핵심 정보 → 깊이 있는 정보 (선택 사항)
- 불필요한 마케팅 말투 제거
📘 One-Line Summary
훌륭한 웹 경험은 사용자의 실제 읽기 방식을 존중하는 명확하고, 간결하며, 목적이 분명한 콘텐츠에서 시작된다.