About Face 4 — 인터랙션 디자인의 본질
1. 목표 지향 디자인, 퍼소나, 시나리오
목표 지향 디자인
사용자의 목표, 니즈, 동기를 이해하는 완벽한 프로세스를 제공. 특정 업무를 수행하도록 동기를 부여하는 것이 사용자의 목표이다.
멘탈 모델
사용자가 제품을 이해하는 방식
구현 모델
컴퓨터 코드를 바탕으로 프로그램이 구현되는 과정
표현 모델
디자이너가 제품의 작동 방법을 사용자에게 설명하는 방식
출처: http://tobetong.com/?p=7001
인터페이스는 구현 모델이 아닌 사용자 멘탈 모델에 맞게 디자인 해야한다.
목표지향 디자인의 인터랙션은 멘탈 모델을 바탕으로 해야한다.
에스노그라피
사용자와 밀착해서 진행하는 관찰하는 관찰 방법론과 직접적인 인터뷰를 조화시킨 리서치 기법. 퍼소나 가설을 설정하고 인터뷰 계획을 세운 뒤 에스노그라피 인터뷰를 진행한다.
에스노그라피 기본규칙
- 직접 사용자를 찾아가 인터뷰하라
- 정해진 질문지를 피하라
- 전문가가 아니라 초심자의 역할을 가정하라
- 끝이 없는 질문과 없는 질문으로 논의를 유도하라
- 사용자의 목표를 먼저, 과업을 나중에 파악하라
- 사용자는 디자이너가 아님을 명심하라
- 기술에 대한 토론을 피하라
- 사용자의 이야기를 들어라
- 사용자의 업무와 작업물을 관찰하라
- 유도 질문을 피하라
퍼소나
리서치 자료를 바탕으로 주요 사용자를 설명하는 상세한 모델. 퍼소나는 특별한 개성을 지닌 한 명의 사람으로 표현된다. 사용자 디자인 모델로서, 특정 실제 인물을 나타내진 않는다.
퍼소나의 특징
- 퍼소나의 핵심은 가장 중요한 사용자 그룹을 파악하는데 있다.
- 어떤 제품을 디자인 해야 하는지, 어떤 기능을 갖춰야 하는지 쉽게 결정할 수 있다.
- 임원진은 물론 개발자 디자이너와 의사소통이 수월해진다.
- 팀의 의견을 하나로 모으기가 쉬워진다.
- 디자인이 적절한지 판단할 수 있는 기준을 제공한다.
- 영업과 마케팅등에도 도움이 된다.
- 사용자에게 쉽게 ‘감정이입’할 수 있는 통로를 제공한다.
퍼소나의 제작 과정
- 역할별 인터뷰 대상 그룹화(라이프 스타일, 가족 내 역할, 기업 직책)
- 행동 변수 파악 (활동 내역, 태도, 적성, 동기, 기술)
- 인터뷰 참여자와 행동변수의 관계도 그리기 (서비스 중심 → 가격중심, 목적 지향 → 즐거움 추구)
- 중요한 행동 패턴을 검토
- 특성과 목표를 설정(행동 자체, 사용환경, 행동에 관련된 인구통계, 스킬, 경험, 역량, 태도와 감정)
- 중복된 내용이나 누락된 부분을 확인
- 퍼소나의 종류 결정
- 행동 패턴과 주요 특징을 중심으로 상세 설명을 작성
시나리오
인터랙션 디자인을 이야기로 풀어나가는 것
시나리오 특징
서술적 이야기는 제품의 잠재적 경험과 기능을 효과적으로 전달한다. 과업수준의 인터랙션이 아니라, 오히려 사용자 목표를 맞추려는 더 폭넓고 멀리 도달하는 인터랙션들을 설명한다. 퍼소나 기반 시나리오를 통해 실제 사용자의 시각에서 제품을 디자인할 수 있다.
디자인 요구사항
‘무엇을’ 디자인할 지 결정한다. 퍼소나는 명확한 목표를 갖고 있다. 이 목표를 바탕으로 필요로 하는 정보와 기능이 무엇인지를 파악해야 한다.
2. 리서치에서 디자인으로 테스트까지
리서치와 디자인을 절충하는 프로세스
- 이상적인 사용자의 인터랙션을 소개하는 시나리오를 작성한다.
- 작성한 시나리오를 바탕으로 사용자 요구사항을 정의한다.
- 사용자의 요구사항을 고려해 기본적인 인터랙션의 틀을 제공한다.
- 세부적인 디자인을 추가해 인터랙션 가이드라인을 완성한다.
디자인 요구사항
‘무엇을’ 디자인할 지 결정한다. 퍼소나는 명확한 목표를 갖고 있다. 이 목표를 바탕으로 필요로 하는 정보와 기능이 무엇인지를 파악해야 한다.
요구사항 도출 프로세스
- 문제 선언문, 디자인 목표 선언문을 작성한다.
- 브레인 스토밍 (긴 시간 ❌)
- 퍼소나의 기대치를 파악한다.
- 정황 시나리오를 제작한다.
- 디자인 요구사항을 도출한다.
디자인 설계도
전반적인 사용자 경험을 말한다. 화면에 기능적 요소를 어떻게 배치해야 하는지 제품이 어떤 식으로 인터랙션해야 하는지 등을 설명한다. 인터랙션 설계도와 시각 디자인 설계도로 나눈다.
인터랙션 설계도
대략적인 화면 구성뿐만 아니라 과업의 흐름과 제품의 행동, 정보 구조를 보여준다.
- 형태와 포스처(제품이 취하는 행동적 성격, 사용자에게 보이는 모습), 입력 방식 결정
- 기능 요소와 정보요소를 판단한다.
- 유사한 요소를 그룹으로 묶고 상하관계를 결정한다.
- 인터랙션 설계도를 스케치한다.
- 주요 경로 시나리오를 작성한다.
- 점검 시나리오 바탕으로 디자인을 테스트한다.
시각 디자인 설계도
시각적인 요소를 활용해 다양한 시안을 제작해본다.
- 경험적 속성을 개발한다. — 제품의 톤, 보이스, 브랜딩 정의를 돕기 위해 사용할 3 ~5 개의 형용사를 고른다. 이 설명적인 키워드 세트를 한데 모아 경험의 속성(experience attribute) 라고 한다.
- 시각 디자인 언어를 결정한다. — 경험의 속성을 근거로 색상과 글꼴, 위젯 구성을 여러가지로 시도해 본다. 각 요소의 입체감과 질감도 고민해야 한다.
- 결정한 스타일을 설계도에 적용한다. — 지금까지 진행해온 시각 디자인과 인터랙션 디자인이 함께 어우러지는 단계. 한 두개의 시각 디자인 스타일을 적용해본다.
사용성 테스트
사용자의 의견을 수집하면 인터랙션 설계도의 문제점을 쉽게 발견할 수 있다.
과업의 순서나 중요도가 잘 못 구성된 부분은 없는지 버튼의 이름이 이해하기 어렵진 않은지 확인한다. 화면을 스크롤하는 속도가 적절한지 등의 의견을 수집한다.
사용자 테스트는 제품을 디자인하는 방법론이 아니다. 디자인을 평가하는 방법론이다.
디자인의 정당성을 점검하는데 초점을 맞춘다.
3. 인터랙션 디자인의 원칙과 포스처, 인터페이스 세금
디자인의 원칙
- 기술이 인간의 이해력과 상상력을 지배해서는 안된다.
- 사용자의 습득력, 지각력, 성장 가능성에 따라 기술의 디자인이 달라져야한다.
인터랙션 디자인 원칙
- 개념적 원칙: ‘이 제품이 무엇인가’
- 행동적 원칙: ‘제품이 어떻게 반응해야 하는가’
- 인터페이스 원칙: ‘행동과 정보의 시각화’
인터랙션 디자인 패턴
비슷한 문제 상황에 적용할 수 있는 일반화된 디자인 대안
- 상태 패턴(postural pattern): 전반적인 제품의 본질을 결정짓는 대안
- 구성 패턴(structural pattern): 화면상의 기능적 요소나 정보의 구성에 관련된 패턴
- 행동 패턴(behavioral pattern): 구체적인 인터랙션에서 직접적이고 실질적인 답을 제공
포스처
제품이 취하는 행동적 성격, 즉 사용자에게 보이는 모습. 모든 포스처는 당연히 사용상의 정황과 환경적 요소를 바탕에 둔다.
독재적 포스처 — sovereign posture
장기간 사용자의 집중을 독점해야만 하는 프로그램. 독재적 어플리케이션은 사용자에게 필요한 많은 기능을 한 공간에서 동시에 제공한다. 화면을 최대화해서 작업하는 경우가 많다. 워드 프로세서, 스프레드 시트, 이메일 프로그램이 해당
일시적 포스처 — transient posture
하나의 단순한 기능만 제공하므로 잠시 등장했다가 빠르게 사라진다.
이런 제품의 인터랙션은 매우 분명하고 간결해야 한다. 그리고 혼동할 여지가 없이 직설적이다.
데몬형 포스처 — daemonic posture
프로그램과 마주칠 기회는 그리 많지 않다. 눈에 띄지 않는 배경에서 조용히 보이지 않게, 본인의 임무를 수행한다. 프린트 드라이버나 네트워크 커넥션이 그 예이다.
인터페이스 세금
수행하고자 하는 목표에 직접적인 관련은 없지만, 이를 수행하는데 꼭 필요한 외부 대향인이나 도구의 수요를 충촉 시키는 추가 작업
세금의 제거
- 거쳐야 할 장소의 수를 줄인다.
- 표지판을 만든다.
- 개요를 만든다.
- 기능에 맞게 컨트롤을 매핑한다.
- 상하구조를 피한다.
- 기계시대의 모델을 복제하지 않는다.
4. 메타포, 숙어, 어포던스
메타포
메타포 중심의 접근법은 일상생활에서 익숙한 이미지를 인터페이스에 도입하는 방법.
인터페이스의 의미를 직관적으로 파악할 수 있다. 제품을 처음 사용하는 사용자에게 어느 정도 도움이 되지만 중급자가 되면 메타포는 방해가 된다.
숙어적 인터페이스
숙어는 직관적이지 않아 학습해야한다. 동시에 쉽게 배울 수 있어야 한다.
라디오 버튼과 닫기 버튼 드롭다운 메뉴와 체크박스 버튼도 금세 익힐 수 있어야 한다.
어포던스
사용자가 인지하는 제품의 실제 속성. 제품이 어떻게 동작할 것인지 사용자가 예상하는 내용. 노먼이 설명한 어포던스는 겉모습만 보고도 어떻게 조작해야 하는지 직관적으로 알 수 있다. 어포던스 디자인은 사용자와의 약속이다. 버튼을 디자인할 때는 ‘조작법이 누르는 것’ 이라고 명시해야 한다.
5. 다양한 니즈를 위한 디자인, 시각 인터페이스
가이드 투어
일련의 화면이나 카드를 통해 필요한 기능, 인터페이스 동작을 소개시켜준다. 각각 간단한 텍스트와 이미지를 포함한다. 중요도에 따라 기본 기능들을 설명하거나, 앱을 이용한 문서 생성, 편집, 공유 등 전형적인 일련의 프로세스를 사용자에게 안내한다.
오버레이
기능 소개의 다른 접근법으로 기능이 교육적으로 반드시 필요하지 않은 단순한 앱에 가장 잘 어울린다. 이름이 암시하듯 오버레이는 화살표와 설명적인 텍스트가 임베딩된 인터페이스 위에 덧씌워진 투명한 시트와 같다.
현지화
- 특정 언어와 문화로 애플리케이션을 번역한다.
- 언어마다 단어나 구절의 길이가 제각각이다.
- 아시아권의 경우 알파벳 순으로 정렬하기 곤란한 경우가 있다.
- 연,월의 시간 순서, 시간을 12시간, 24시간 단위로 표기할 것인지 나라마다 다르다.
- 숫자에 점을 찍는 방법. 화폐 단위도 각양각색이다.
- 어떤 국가에서는 주에 숫자를 붙여 사용한다.
접근성
연령, 사고, 질환 때문에 인지, 감각, 동작의 장애가 있는 사람 외에 그런 장애가 없는 사람을 위해서도 효과적으로 사용할 수 있도록 앱을 디자인 한다.
접근성 가이드라인
- OS 접근성 도구와 가이드라인을 활용한다.
- 시각전용, 청각전용 산출물을 제공한다.
- 표준 키보드 접근 방법을 활성화 한다.
- 단순하고 명확하며 간략한 언어를 사용한다.
- 레이아웃과 과업흐름의 일관성을 유지한다.
- 시력이 제한된 사람을 위해 디스플레이 옵션을 통합한다.
6. 시각 인터페이스 디자인
인터페이스 디자인
시각적 요소를 어떻게 배치하는가 하는 것. 각 요소는 형태와 색상 등의 개별 속성을 지닌다. 여러 요소와 속성이 한데 어울려 특정의미를 전달한다.
인터페이스에서 텍스트
- 대비가 높은 텍스트를 적용하라
- 적절한 폰트와 크기를 설정하라
- 명쾌한 문장을 작성하라
시각 인터페이스 디자인 원칙
- 톤 브랜드를 전달한다.
- 시각적 속성을 활용해 요소를 그룹핑하고 명확한 상하구조를 만든다.
- 모든 정보마다 명쾌한 시각적 구성과 흐름을 제공한다.
- 사용자가 주어진 화면에서 할 수 있는 일을 알린다.
- 명령어에 대응한다.
- 중요한 이벤트에 관심을 끈다.
- 일관적 시각적 체계를 구축해 경험 전반의 일관성을 보장한다.
- 심플하게 디자인한다.
7. 모바일 디자인
스택
보통 목록이나 그리드로 배치된 컨텐츠 영역이 있는 수직으로 구성된 구조이며 컨텐츠 네비게이션과 기능 접근을 위해 상단이나 하단 혹은 둘다 위치한다.
화면 카루셀
사용자가 좌우 스와이프 제스처로 재빨리 내비게이션할 수 있는 여러 인스턴스나 변형이 있는 대시보드 같은 디스플레이에 가장 적절한 대한적인 최상위 패턴
컨텐츠 내 사용자 위치를 표시하는 페이지 마커 위젯과 순환흐름을 제공해야 한다.
스윔레인
카루셀의 수직 스택인데, 각각 다른 스윔레인과 독립적으로 수평으로 스크롤할 수 있다. 결코 자동으로 진행해선 안된다.
바
휴대용 모바일 앱의 다양한 기능, 컨텐츠 영역의 주 내비게이션 장치. 바는 아이콘이나 텍스트레이블이 있는 탭이나 버튼 같은 컨트롤로 구성되는 화면 상하단의 좁은 수평영역
드로어
탭과 유사한 내비게이션 요소의 수직목록에 접근하게 해주는 현명한 숙어. 드로어 아이콘은 햄버거 메뉴 아이콘이다.
버튼
플랫한 어포던스가 유행이다.
하이퍼링크
전형적으로 밑줄이 그어진 문자의 형태를 취하며 내비게이션을 위한 필수 컨트롤이다. 내비게이션은 링크, 명령에는 버튼 혹은 아이콘 버튼을 클릭한다.
체크박스
클릭하면 체크표시가 생긴다. 잘 작문된 문자열로 체크박스의 의도를 분명히 한다. 정사각형의 패턴이다. 여러개의 항목을 선택할 수 있다.
라디오 버튼
그룹에서 버튼 간 상호합의하에 단독으로만 기능을 수행한다는 점에 있다. 즉 하나의 옵션이 선택되면 그 밖의 옵션은 자동으로 선택이 해제 된다. 한 번에 오직 하나의 버튼만 선택 가능하다. 체크박스는 정사각형 라디오는 원형으로 되어있다.
스위치
라디오 버튼 두 개를 함께 사용한 좀 더 간결한 버전
데스크탑, 웹앱에서는 덜 흔하며 사용하기에 다소 어색하다.
