UX 디자인 원칙
가능한 화면 요소를 덜어내고 덜어내고 덜어내자
전통적인 웹 디자인에서는 화면 영역을 명확히 구별하기 위해 테두리를 두는 등 시각적 구분을 명확히 했습니다. 이는 게슈탈트 법칙 중 폐쇄성의 법칙과 연관성이 있습니다.
하지만 디자인 트렌드가 많이 바뀌었습니다. 플랫 디자인과 미니멀리즘이 디자인 트렌드가 된 지 어느 정도 시간이 많이 흘렀습니다. 이에 맞춰 웹에 있는 박스나 구분 선을 제거하는 등 화면 구성 요소를 더 간결하게 보여주고 있습니다.
예를 들어 YAHOO.COM 사례를 살펴보겠습니다. 이전 (미니멀리즘 이전) 야후의 메인 페이지를 살펴보면 상위에 있는 뉴스와 바로 아래 있는 뉴스 사이에 실선의 경계선으로 상위 컨텐츠와 하위 컨텐츠 여부를 시각적으로 구분해 줬습니다.
반면, 지금 야후의 메인 페이지를 보면 콘텐츠 사이에 실선의 경계선이 없어 화면 영역이 깔끔하다는 인상을 갖게 합니다.
이처럼 박스나 경계선을 없애는 것은 미니멀리즘 디자인 원칙을 잘 따라가고 있는 사례로 보시면 될 것 같습니다.
다음 포털의 PC 버전의 개편 사례를 통해 화면 영역에서 구분선과 박스를 어떻게 제거했는지 한 번 살펴보도록 하겠습니다.
사례 1.
이전 다음 포탈 로그인 영역을 보면 '회원가입'과 '아이디 비밀번호 찾기' 사이에 구분선이 있었습니다.
이후 개편된 다음 포털 사이트의 로그인 영역을 보면 '회원가입'과 '아이디 비밀번호 찾기' 영역을 보면 구분 선이 없어 깔끔합니다.
지금의 다음 포털의 로그인 영역은 필요한 요소만 남겨 놓았습니다.
훨씬 이전에 비해 깔끔해 보입니다.
사례 2.
예전 포탈 추천 키워드 영역을 보면 키워드와 키워드 사이에 구분 선이 있었습니다.
이후 개편된 다음 포털 사이트의 키워드 검색 영역을 보면 추천 키워드가 제공되는데, 키워드 사이에 구분선이 없어 깔끔해 보입니다.
사례 3.
예전 다음 포탈 쇼핑 영역을 보면 쇼핑홈, 소호, 21드레스, CJmall, 롯데닷컴 등 탭 메뉴에 구분 선이 있었습니다.
이후 개편된 다음 포털 사이트의 쇼핑 영역을 보면 실시간, 소호, 전문샵, 위메프 탭 메뉴 사이에 구분 선이 없어 깔끔합니다.
최근 다음 포털 사이트의 쇼핑 영역은 G마켓, 옥션만 있습니다.
이전에 비해 더 간결해졌습니다.
사례 4.
예전 다음 포탈 카테고리 영역은 카드 디자인 형태로 제공되고 있지만, 콘텐츠가 박스에 갇혀있어 조금 답답해 보입니다. 또한, 디자인 구성도 똑같은 크기로 제공되어 있어 사용자 시각에서 보면 어떤 컨텐츠에 관심을 가져야 하는지 한눈에 인지가 되지 않습니다.
이후 개편 후 다음 포털 사이트의 카테고리 영역에서 다양한 콘텐츠를 제공하고 있는데, 중요 콘텐츠는 이미지를 크게, 전체적인 디자인 구성이 리듬감이 있어 보입니다. 또한, 개편 전에는 콘텐츠와 콘텐츠를 구분하기 위해 박스 형태로 제공되어 뭔가 답답해 보였는데, 개편 후에는 과감히 박스를 제거한 것이 이전과 큰 차이점이 있습니다.
최근, 다음 포털 사이트의 카테고리 영역도 위 사례와 유사한 형태로 유지하고 있습니다.
정리하면, 사용자에게 많은 정보나 요소를 보여주는 것은 사용자의 시선을 방해할 수 있습니다.
따라서, 가능한 화면의 요소를 덜어내고 심플하게 보여주면 보여줄수록, 그만큼 사용자의 시선을 더 끌어올 수 있다는 것! 프로덕트 디자이너 여러분 잊지 마세요!
감사합니다.
위 내용에 대해 더 알고 싶으면 아래 UX 강좌&스터디 신청해 보세요~
민수샘의 VOD UX 신규 강좌 17개 오픈 기념!!!!
UX 신규 강좌 묶음 할인 이벤트 !!!!!
(한정 판매!!!!! 할인율 94%, 1,640,000원 > 98,000원)
(평생 소장)
자세한 UX 강좌 커리큘럼 확인 > 아래 링크 클릭하시면 됩니다.
https://ebprux.liveklass.com/packages/78858
(신청 중!!!) 프로덕트 디자이너를 위한 추천 UX 강좌
[1일차 줌 Live/8월8일] 메크로 데스크 리서치 UX 방법론
- 메크로 데스크 리서치 개념 > 데스크 리서치란?
- 메크로 데스크 리서치 개념 > 메크로 데스크 리서치
- 메크로 데스크 리서치 개념 > 마이크로 데스크 리서치
- 메크로 데스크 리서치 개념 > 유저 리서치
- 메크로 데스크 리서치 기대효과 > 프로젝트 목표 구체화
- 메크로 데스트 리서치 기대효과 > 최근 업계 동향 파악 가능
- 메크로 데스트 리서치 기대효과 > 유저 리서치 체계적 준비
- 메크로 데스트 리서치 기대효과 > 가설 수립에 따른 러프스케치
- 메크로 데스트 리서치 기대효과 > UX 리서치릍 통해 가설 검증
- 메크로 데스크 리서치 방법론 > Step1. 서비스 정의 및 변천사 파악
- 메크로 데스크 리서치 방법론 > Step2. 유저 Context에서 키워드 발견
- 메크로 데스크 리서치 방법론 > Step3. 키워드별 서비스 R&R 정의 및 가설 도출
- 메크로 데스크 리서치 방법론 > Step4. 러프 스케치 작성
[2일차 줌 Live/8월10일] 스토리라인(UX 분석 출발 Key)
- 스토리라인 개념 > 스토리라인 무엇인가?
- 스토리라인 개념 > 스토리라인 필요성
- 스토리라인 개념 > UX 디자인 프로젝트에서 스토리라인을 활용하면 어떤 점이 좋은가?
- 스토리라인 개념 > 스토리라인과 여정지도의 유사점과 차이점은 무엇인가?
- Task 기반 스토리라인 작성 방법론 > Step1. 사용자 유형 정의
- Task 기반 스토리라인 작성 방법론 > Step2. 기능 나열
- Task 기반 스토리라인 작성 방법론 > Step3. 포스트잇 작성
- Task 기반 스토리라인 작성 방법론 > Step4. 어피니티 헤더 작성
- Task 기반 스토리라인 작성 방법론 > Step5. 어피니티 헤더 맞춰 그룹핑
- Task 기반 스토리라인 작성 방법론 > Step6. 스토리라인 최종 정리
[3일차 줌 Live/8월15일] WOM 분석 UX 방법론
- WOM 분석 개념 > WOM 분석이란?
- WOM 분석 개념 > UX 디자인 프로젝트에서 WOM 분석 방법을 활용하면 어떤 점이좋은가?
- WOM 분석 개념 > WOM 분석 장점과 단점
- WOM 분석 개념 > 더블 다이아몬드
- WOM 분석 방법론 > Step1. VOC 수집한다
- WOM 분석 방법론 > Step2. 수집한 VOC를 스토리라인에 매핑한다
- WOM 분석 방법론 > Step3. 긍정적 이미지와 부정적 이미지 분류한다
- WOM 분석 방법론 > Step4. 소항목별 인사이트를 도출한다
- WOM 분석 방법론 > Step5. (AS-IS VS To-Be)기능 발견한다
- WOM 분석 방법론 > Step6. (AS-IS VS To-Be) 기능 우선 순위 선정한다
[4일차 줌 Live/8월17일] 브레인덤프, 이해관계자 인터뷰, 컨텍스츄얼 인쿼리
- 브레인덤프 > Step1. Task 정의한다
- 브레인덤프 > Step2. Task별 Flow에 맞춰 궁금한 점 포스트잇에 작성한다
- 브레인덤프 > Step3. 여정지도에 맞춰 포스트잇을 붙인다
- 브레인덤프 > Step4. 여정지도에 맞춰 이해관계자 인터뷰 스크립트를 작성한다
- 이해관계자 인터뷰 > Step1. Hierarchical Task 정의
- 이해관계자 인터뷰 > Step2. Task 분석 및 User 관점 이슈 검토
- 이해관계자 인터뷰 > Step3. 이해관계자 인터뷰 스크립트 작성
- 이해관계자 인터뷰 > Step4. 이해관계자 인터뷰 결과, VOC 정리
- 이해관계자 인터뷰 > Step5. VOC 결과를 토대로 UX 관점 인사이트 도출
- 이해관계자 인터뷰 > Step6. UX 리서치 검증을 위한 가설 수립
- 컨텍스츄얼 인쿼리 UX 방법론 > 개념
- 컨텍스츄얼 인쿼리 UX 방법론 > Step1. 조사 목적 정의
- 컨텍스츄얼 인쿼리 UX 방법론 > Step2. 관찰 체크리스트 정의
- 컨텍스츄얼 인쿼리 UX 방법론 > Step3. 동석 근무
- 컨텍스츄얼 인쿼리 UX 방법론 > Step4. Contextual inquiry 분석 결과 인사이트 도출
[5일차 줌 Live/8월19일] 심화 QA& 및 (희망자) 과제 피드백 1회
[6일차 줌 Live/8월22일] 마이크로 데스크 리서치(벤치마킹) UX 방법론
- 벤치마킹 유형1. 클라이언트의 추상적 생각을 구체화하기 위해서 벤치마킹은 어떻게 해야 하는가?
- 벤치마킹 유형2. 서비스 역할 관점 벤치마킹은 어떻게 해야 하는가?
- 벤치마킹 유형3. Task 관점 벤치마킹은 어떻게 해야 하는가?
- 벤치마킹 유형4. 경쟁사 VS 자사 벤치마킹은 어떻게 해야 하는가?
- 벤치마킹 유형5. 웹 서비스 히스토리 관점 벤치마킹은 어떻게 해야 하는가?
- 벤치마킹 유형6. 레이블링 보편성을 파악하기 위한 벤치마킹은 어떻게 해야 하는가?
- 벤치마킹유형7. UI 관점 벤치마킹은 어떻게 해야 하는가?
- 벤치마킹 유형8. 러프 스케치 목적으로 벤치마킹 진행 시 어떻게 해야 하는가?
- 벤치마킹 보고서 작성법1. 벤치마킹 보고서는 어떻게 작성하는가
- 벤치마킹 보고서 작성법2. 이해관계자 대상 벤치마킹 리뷰는 어떻게 진행하는가?
- 벤치마킹 보고서 작성법3. 데스크 리서치 결과를 UX 디자인 프로젝트에 어떻게 활용하는가?
[7일차 줌 Live/8월24일] UX 리서치/서베이/FGI
- UX 리서치 개념 > 정성적 리서치 무엇인가?
- UX 리서치 개념 > 정량적 리서치 무엇인가?
- UX 리서치 개념 > 마켓 리서치와 UX 리서치의 차이점
- UX 리서치 개념 > UX 리서치 5가지 요소
- 서베이 > 응답자 프로파일
- 서베이 > 이용 형태 분석
- 서베이 > 문항별 평균
- 서베이 > Top2 VS 항목별 교차 분석
- 서베이 > 항목별 Why 분석
- FGI > 다이어리 스터디를 통한 FGI 프로그램 설계
- FGI > 서비스 이용 태도, 목적, 문제점, 개선 이슈 파악한다
- FGI > 그룹별 의견을 파악한다
- FGI > 그룹별 프로토타입에 대한 반응 및 선호를 파악한다
- FGI > FGI 보고서는 어떻게 작성하는가?
[8일차 줌 Live/8월26일] 심화 QA& 및 (희망자) 과제 피드백 2회
[9일차 줌 Live/8월29일] 인뎁스 인터뷰 I
- 인뎁스 인터뷰 개념 > 인뎁스 인터뷰 무엇인가?
- 인뎁스 인터뷰 개념 > 인뎁스 인터뷰 장단점은 무엇인가?
- 인뎁스 인터뷰 개념 > 인뎁스 인터뷰 한계는 무엇인가?
- 인터뷰 질의서 > 비구조화 인터뷰와 구조화 인터뷰 차이점은 무엇인가?
- 인터뷰 질의서 > 인터뷰 질의서는 어떻게 작성하는가?
- 인터뷰 참여자 섭외 > 참여자 프로파일은 어떻게 정의하는가?
- 인터뷰 참여자 섭외 > 참여자 선별 질문은 어떻게 작성하는가?
- 인터뷰 참여자 섭외 > 참여자 섭외는 어떻게 하는가?
- 모더레이터의 역할 > 모더레이터가 반드시 알아야 할 인터뷰 기법은 무엇인가?
- 모더레이터의 역할 > 인터뷰 진행 시 참여자의 의견을 어떻게 도출하는가?
[10일차 줌 Live/8월31일] 인뎁스 인터뷰 II
- 인터뷰 진행 VS 캐어묻기 원칙(행동)
- 인터뷰 진행 VS 캐어묻기 원칙(상황)
- 인터뷰 진행 VS 캐어묻기 원칙(태도)
- 인터뷰 진행 VS 캐어묻기 원칙(니즈)
- 인터뷰 결과 VOC 정리 VS 인뎁스 인터뷰 진행 시 기록물은 어떻게 관리하고 정리하는가
- 인터뷰 결과 VOC 정리 VS 인뎁스 인터뷰 결과, 참여자의 VOC를 어떻게 정리하는가?
- 인터뷰 결과 VOC 정리 VS 인뎁스 인터뷰 결과, Context 관점에서 어떻게 분류하는가?
- 인터뷰 결과 VS 인사이트 도출 및 보고서는 어떻게 작성하는가?
[11일차 줌 Live/9월2일] 심화 QA& 및 (희망자) 과제 피드백 3회
[12일차 줌 Live/9월5일] 사용성 테스트 I
- 사용성 테스트 참여자 선정 > 참여자 프로파일은 어떻게 정의하는가?
- 사용성 테스트 참여자 선정 > 사용성 테스트 진행 시 해비유저와 비해비 유저 중 누구를 참여시키고 있는가?
- 사용성 테스트 참여자 선정 > 사용성 테스트 진행 시 패널은 몇명 참여하는가?
- 사용성 테스트 참여자 선정 > 참여자 선별 질문지는 어떻게 작성하는가?
- 사용성 테스트 참여자 선정 > 참여자는 어떻게 섭외하는가?
- 과제 시나리오 목표 수립 > 일반적 목표
- 과제 시나리오 목표 수립 > 일반적 관심 사항
- 과제 시나리오 목표 수립 > 특정한 관심 사항
- 과제 시나리오 목표 수립 > 특정한 관심사항 측정
- 과제 시나리오 > 자유 과제 시나리오는 무엇인가?
- 과제 시나리오 > 지정 과제 시나리오는 무엇인가?
- 과제 시나리오 > 과제 순서는 어떻게 정하는가?
- 과제 시나리오 > 과제가 많을 경우 어떻게 우선순위를 선정하는가?
- 과제 시나리오 > 경쟁사와 자사를 테스트하고자 하는 경우, 과제 신정은 어떻게 진행하는가?
[13일차 줌 Live/9월7일] 사용성 테스트 II
- 사용성 테스트 진행 > 씽크 얼라우드(Think-aloud)
- 사용성 테스트 진행 > 모더레이터의 역할
- 사용성 테스트 진행 > 사용성 테스트 진행 Tips
- 사용성 테스트 측정 > 효과성
- 사용성 테스트 측정 > 효율성
- 사용성 테스트 측정 > 만족도
- 사용성 테스트 측정 > 오류
- 사용성 문제점/개선/가이드라인 > 사용성 원칙을 왜 알아야 하는가?
- 사용성 문제점/개선/가이드라인 > 사용성 테스트 진행 시 문제점을 어떻게 발견하는가?
- 사용성 문제점/개선/가이드라인 > 사용성 테스트 진행 시 개선점을 어떻게 제시하는가?
- 사용성 문제점/개선/가이드라인 > 사용성 가이드라인 무엇인가?
- 사용성 문제점/개선/가이드라인 > UX 디자인 프로젝트에 사용성 가이드를 어떻게 활용하는가?
[14일차 줌 Live/9월14일] User Context UX 전략
- UX 리서치 결과,인사이트 도출하기 > 행동(Task) 관점
- UX 리서치 결과,인사이트 도출하기 > 태도(Context) 관점
- UX 리서치 결과,인사이트 도출하기 > 목표 관점
- 어피니티 다이어그램 > Step1. 아이디어를 카드에 적는다
- 어피니티 다이어그램 > Step2. 관련된 카드를 그룹으로 만든다
- 어피니티 다이어그램 > Step3. 각각의 그룹에 카드들의 특성을 대표하는 이름을 붙인다
- 어피니티 다이어그램 > Step4. 그룹을 조정한다
- 어피니티 다이어그램 > Step5. 어피니티 다이어그램 이후 러프스케치를 함께 그린다
- UX 컨셉 > UX 컨셉은 화면 설계에 어떻게 반영하는가?
- UX 컨셉 > Step1. 사이트/서비스 역할을 정의한다
- UX 컨셉 > Step2. 서비스 구성 방안을 제시한다
- UX 컨셉 > Step3. AS-IS VS To-Be 방안을 제시한다
- UX 컨셉 > Step4. UI 구성 방안을 제시한다
[15일차 줌 Live/9월16일] 심화 QA& 및 (희망자) 과제 피드백 4회
[16일차 줌 Live/9월19일] 여정지도
- 여정지도 개념 > 여정지도란 무엇인가?
- 여정지도 개념 > 여정지도는 퍼소나 전에 작성해야 하는가? 퍼소나 이후 여정지도를 만들어야 하는가?
- 여정지도 개념 > UX 디자인 프로젝트에 여정지도를 어떻게 활용해야 하는가?
- 여정지도 개념 > 여정지도는 어떻게 작성하는가?
- 여정지도 방법론 > Step1. User, Goal, Scope
- 여정지도 방법론 > Step2. Phases
- 여정지도 방법론 > Step3. Actions/Tasks
- 여정지도 방법론 > Step4. Touchpoints & Channels
- 여정지도 방법론 > Step5. Emotions and pain points
- 여정지도 방법론 > Step6. Opportunities for features and improvements
[17일차 줌 Live/9월21일] 퍼소나
- 앨런쿠퍼 퍼소나 > Step1. 행동 변수를 만들기 위해 인터뷰 항목을 정의한다
- 앨런쿠퍼 퍼소나 > Step2. 인터뷰 결과, 시사점 및 행동변수 및 질문지를 만든다
- 앨런쿠퍼 퍼소나 > Step3. 패널 선정 및 리서치 결과 공통 분모 그룹핑한다
- 앨런쿠퍼 퍼소나 > Step4. 퍼소나별 특징/태도/기능 정의한다
- 목적형 퍼소나 > 역할 기반 목적형 퍼소나
- 목적형 퍼소나 > 오프라인 Context 기반/Context 분석 관점 목적형 퍼소나
- 목적형 퍼소나 > 프로토타입 리서치 관점 목적형 퍼소나
- 목적형 퍼소나 > UX 컨셉/서비스 고도화/린 UX 관점 목적형 퍼소나
- 프로토 퍼소나
[18일차 줌 Live/9월23일] 심화 QA& 및 (희망자) 과제 피드백 5회
[19일차 줌 Live/9월26일] 정보 구조 & 카드소팅
- 정보 구조 설계 > Step1. Brainstorming the user flow
- 정보 구조 설계 > Step2. Paper/Final User Flow
- 정보 구조 설계 > Step3. Card sort
- 정보 구조 설계 > Step4. Site map paper sketch
- 정보 구조 설계 > Step5. Digital Site Map
- 정보 구조 표현 > 동선 관점
- 정보 구조 표현 > Life 관점
- 정보 구조 표현 > Old VS New
- 정보 구조 표현 > 화면 요소 관점
- 정보 구조 표현 > CTA 버튼 강조
- 카드소팅 > 열린카드 소팅 방법은 어떻게 진행하는가?
- 카드소팅 > 닫힌카드 소팅 방법은 어떻게 진행하는가?
- 카드소팅 > 카드소팅 보고서는 어떻게 작성하는가?
[20일차 줌 Live/9월28일] 디자인 크리틱
- 디자인 크리틱은 무엇인가?
- UX 디자인 프로젝트에서 디자인 크리틱을 어떻게 활용하는가?
- 이해관계자 대상 디자인 크리틱은 어떻게 진행하는가?
[21일차 줌 Live/9월30일] 심화 QA& 및 (희망자) 과제 피드백 6회
[22일차 줌 Live/10월3일] 유저 시나리오
- 유저 시나리오 > 주요 Task별 유저 시나리오 정의는 어떻게 하는가?
- 유저 시나리오 > AS-IS VS To-Be UI Flow 어떻게 보여줘야 하는가?
- 유저 시나리오 작성 방법 > Step1. 퍼소나 혹은 UX 컨셉 결과를 토대로 주요 Task 어떻게 정의하는가?
- 유저 시나리오 작성 방법 > Step2. 주요 Task별 상황 시나리오는 어떻게 구성하는가?
- 유저 시나리오 작성 방법 > Step3. 주요 Task별 Flow Chart 구성하는가?
- 유저 시나리오 작성 방법 > Step4. 주요 Task별 러프 스케치는 어떻게 작성하는가?
[23일차 줌 Live/10월5일] 프로토타이핑 & 와이어프레임
- 프로토타이핑 유형 > Conceptual Prototyping
- 프로토타이핑 유형 > Low-fidelity Prototyping
- 프로토타이핑 유형 > Medium-fidelity Prototyping
- 프로토타이핑 유형 > High-fidelity Prototyping
- 프로토타이핑 테스트 > 화면 설계 관점에서 프로토타이팅 테스트는 어떻게 진행하는가?
- 프로토타이핑 테스트 > 선호도 관점에서 프로토타이핑 테스트는 어떻게 진행하는가?
- 와이어프레임 > 낮은 수준의 와이어프레임
- 와이어프레임 > 중간 수준의 와이어프레임
- 와이어프레임 > 고충실도 와이어프레임
[24일차 줌 Live/10월7일] 심화 QA& 및 (희망자) 과제 피드백 7회
[25일차 줌 Live/10월10일] 휴리스틱 평가 & 메인 디자인 시안 AB 테스트
- 휴리스틱 평가 원칙 > 원칙1. 사용자에게 시스템의 현재 상태를 시각화하여 보여준다
- 휴리스틱 평가 원칙 > 원칙2. 현실 세계와 부합하도록 시스템을 설계한다.
- 휴리스틱 평가 원칙 > 원칙3. 사용자에게 적절한 통제권을 부여한다.
- 휴리스틱 평가 원칙 > 원칙4. 일관성과 표준성을 높인다
- 휴리스틱 평가 원칙 > 원칙5. 사용자의 실수를 미연에 방지할 수 있도록 설계한다
- 휴리스틱 평가 원칙 > 원칙6. 사용자가 적은 인지적 노력으로 시스템을 사용할 수 있게 한다
- 휴리스틱 평가 원칙 > 원칙7. 사용자가 시스템을 유연하게 사용할 수 있도록 한다
- 휴리스틱 평가 원칙 > 원칙8. 심미적이고 간결한 시스템을 제공한다.
- 휴리스틱 평가 원칙 > 원칙9. 에러 발생 시용자 스스로 문제를 파악하고 수정할 수 있도록 설계한다
- 휴리스틱 평가 원칙 > 원칙10. 사용자에게 충분한 도움말을 제공한다
- 디자인 시안 테스트 > 디자인 시안 테스트는 왜 필요한가?
- 디자인 시안 테스트 > 디자인 시안 테스트는 어떻게 진행하는가?
- 디자인 시안 테스트 > 투사법이란 무엇인가?
- 디자인 시안 테스트 > 디자인 투사법 테스트는 어떻게 진행하는가?
- 디자인 시안 테스트 > 디자인 시안 테스트 조사 보고서는 어떻게 작성하는가?
[26일차 줌 Live/10월14일] 심화 QA& 및 (희망자) 과제 피드백 8회