UX 디자인 7가지 법칙UX 디자인 7가지 법칙
1. UX란?
UI, 인터랙션, UX의 공통점과 차이점은 무엇인가?
UI: 사용자와 제품 사이에 존재하는 면으로 UI에서 사용자와 제품간의 상호작용이 발생한다.
인터랙션: 사용자가 목적을 달성하기 위해 제품의 UI를 사용하여 상호작용하는 과정
UX: 사용자가 목적 달성과정에서 느끼는 종합적인 만족감
협의의 UX 디자인과 광의의 UX 디자인은 무엇이며 시스템의 관점의 UX 디자인이란 무엇인가?
협의의 UX: 제품을 구입하고 사용하는 과정에서 경험하는 UX. 예를 들어 만족감, 브랜드, 고급감 등이 있다.
광의의 UX: 제품을 구입하기 위한 정보 탐색 단계부터 대안을 평가하고 구매하기까지 전 과정
LUI, GUI, AUI, PUI 란 무엇인가?
LUI: 기능/ 사용성/ 시나리오
GUI: 아이콘/ 그래픽 이미지
AUI: 벨소리/ 효과음
PUI: 버튼 배치/ 그립감/ 입력도구
제품 개발 과정에서 UX 디자이너는 어떤 역할을 하는가?
제품 디자인과 기구 설계에 필요한 버튼 레이아웃을 제품 디자이너와 기구설계팀과 협력해서 디자인, UI 시나리오 기능구조 그래픽 디자이너가 필요한 정보구조 디자인
2. 사용자의 인지적 특성을 인터랙션 디자인에 반영한다.
왜 인터랙션 디자이너가 인지심리학을 알아야 하나?
사용자는 처음보는 제품을 사용할 때 사용법을 예측하고, 새롭게 학습한 사용법을 기억하려 한다.
어떤것은 쉽게 기억하고 어떤것은 나중에 기억한다. 따라서 예측이 쉽고 기억하기 쉬운 인터랙션을 디자인하기 위해 인지심리학 이론을 알아야 한다.
단기 기억에 정보가 저장될 때 어떤 인지적 특성이 있고, 이특성으로부터 어떤 설계원칙을 도출할 수 있나?
사용자가 장기기억에 저장된 의미를 활용해서 단기기억에서 한 단위로 묶을 수 있게 인터랙션을 설계해야 한다.
사람은 정보를 받아들일 때 그대로 복사하는게 아니라 의미있는 해석을 통해서 정보를 재구성하고 이를 기억한다. 이러한 인지적 특성으로부터 어떤 설계원칙을 도출할 수 있나?
사용자가 처음보는 제품을 사용할 때 사용자의 장기기억에 저장된 의미를 활용해서 제품의 사용법에 의미를 부여하고 해석할 수 있도록 인터랙션을 설계 해야한다.
사용자는 처음 보는 제품을 사용할 때 스키마를 어떻게 활용하는가?
사용자는 제품의 사용법을 그대로 암기하는 것이 아니라 이전의 사용했던 유사 앱의 사용법을 동원해서 새로운 앱의 사용법을 예측하므로 사용자의 기대에 맞는 인터랙션을 설계해야한다.
인지심리학 이론들은 제품의 사용법이 사용자에게 익숙하도록 디자인할 것을 요구한다. 그렇다면 인터랙션 디자이너는 어떻게 디자인을 차별화할 수 있나?
제품만의 차별화된 요소는 바로 매력요소에서 찾아야한다. 매력요소는 사용자가 제품을 구입하도록 유인하는 중요한 요소로서 매력요소를 제품의 차별점으로 활용하면 경쟁에서 살아남을 수 있다.
3. 설계 원칙을 명확하게 이해하고 인터랙션 디자인에 적용한다.
사용자가 제품 서비스에 요구하는 다섯가지 계층구조는?
창의성(creativity): 즐거운, 기쁜
능숙성(proficiency): 효율성
사용성(usability): 편한, 영리한, 잘 반응하는
신뢰성(reliability): 믿을 수 있는
기능성(functionality): 적절한, 똑똑한
새로운 기능을 넣는 것이 어려울까? 있는 기능을 빼는 것이 어려울까?
있는 기능을 빼는 것이 더 어렵다. 새로운 기능을 빼는 것은 기업에서 성과로 인정해 주지 않는다. 더구나 사소한 기능이라도 없어지면 누군가는 불만족한다. 기능이 많아지도 사용 편의성이 나빠지지 않게 하려면 사용자에게 익숙한 방식으로 UI설계 해야한다.
정보를 분류하는 기준이 될 수 있는 다섯 가지는?
알파벳, 분류, 시간, 위치, 연속체
사용자가 인터페이스를 사용할 때 흔히쓰는 전략을 무엇이라 하는가?
사용자는 매뉴얼을 보지 않는다. 직접 제품을 써가면서 시행착오를 겪으며 탐험적으로 배운다. 이를 탐험적 학습전략이라고 한다.
스테리오 타입이란?
다양한 문화속에서 공통적인 패턴에 대한 경험으로 인해 형성된 고정관념이다.
중복코딩과 간섭의 차이는?
중복코딩의 원리는 같은 내용의 정보를 다른 형태로 중복하여 제시하는 것이다. 예를 들어 소음이 있는 상황에서 시각 메시지와 청각메시지를 동시에 제시하면 지각할 확률을 높여준다.
사용자가 설계자에 의해 의도된 행위를 하도록 유도하려면?
디자이너는 가능한 모든 상황에서 사물과 환경이 반드시 의도된 기능을 유도하도록 디자인 해야한다. 그리고 새로운 UI를 설계할 때 유사한 사물과 환경을 찾아서 그들의 모양, 행동, 기능 등을 모방해야 한다.
깊은 구조와 넓은 구조 중 어떤 것이 좋을까?
기능으로 접근하는 경로나 태스크 수행을 위한 절차는 너무 깊고 복잡하면 안된다. 일반적으로 사람들은 어떤 경로나 절차로 세 단계이상 깊숙이 들어가면 인지적으로 길을 잃어버린다.
일관성은 반드시 지켜야만 하는 것일까?
일관성보다 더 큰 태스크 맥락이 더 중요하다. 예를 들어 매너모드에서 알람, mp3 재생이 사용자 설정 없이 소리가 나야 한다. 사용자에게 결정하도록 하는 것은 꼭 필요한 경우가 아니라면 복잡성만 높이는 좋지 않은 방법이다.
인터페이스를 접는다는 의미는?
Progressive Disclosure 단계적 정보 공개.
정보를 여러 단계로 구분하고 단계별로 필요하거나 관련된 정보만 보여주는 것이다. 이는 정보의 과부하를 방지하며 사용자가 복잡성을 다룰 수 있도록 하는 좋은 방법이다.
80/20 원칙과의 관계는?
80/20 원칙이란 대규모 시스템이 만들어낸 효과의 80%는 시스템 변수 20%에서 비롯된다. 제품 사용시간의 80%는 기능의 20%가 차지한다.
4. 태스크 지식을 전문 사용자 수준으로 이해한다.
사용자의 테스크 지식은 어떻게 형성되고 사용자는 처음보는 제품을 사용할 때 태스크 지식을 어떻게 활용하나?
사용자는 태스크 지식을 바탕으로 제품을 어떤 방식으로 사용할 것인지 기대할 뿐만 아니라 제품의 디스플래이를 통해 제공되는 정보로부터 태스크 수행을 위한 실마리는 얻는다.
- 태스크 지식: 사용자가 처음 사용하는 제품의 작동방식을 예측할 때 도입하는 사전경험. 대형마트 앱을 사용하는 경우 실제 대형마트에서 쇼핑을 하면서 형성된 지식 등
인터랙션을 디자인 할 때 태스크 분석을 반드시 해야하는 이유는 무엇인가?
- 태스크 분석 없이 인터랙션 디자인을 할 수 없다.
- 태스크를 분석하지 않으면 피상적인 범용의 인터페이스를 디자인하게 된다.
- 태스크 분석은 기능 선발의 근거를 제공한다.
- 태스크 절차는 인터페이스의 기능 구조, 정보 구조, 제어 흐름을 설계하는 근거가 된다.
태스크 분석에서 목적, 태스크 , 기능을 어떻게 구별하나?
목적: 사용자가 제품을 사용해서 달성하기 원하는 것
태스크: 목적을 달성하기 위해 사용자가 현실에서 수행하는 일을 의미
기능: 사용자가 이 태스크를 수행하는 것을 돕기 위해서 제품이 제공하는게 기능이다.
태스크 분석에 기능을 포함하지 않는 이유는 무엇인가?
태스크 분석과 제품을 분리함으로써 인터랙션 설계자가 태스크를 기초로 다양한 설계 대안을 도출할 수 있다.
카드 소팅해서 태스크를 분석할 때 어떻게 태스크 분석의 완전성을 달성할 수 있나?
사용자들이 이야기 한 것을 요약해서 카드를 만들고 카드들을 유사성에 의해 그룹핑하여 문제의 구조를 파악하는 것이다. 눈에 보이지 않는 목적 구조를 드러내 키워드를 도출한다. 그리고 하양식 분석을 통해서 참가자들이 미처 생각하지 못했던 새로운 카드를 생성하여 중요한 태스크가 빠지지 않도록 하여 태스크 분석의 ‘완전성’을 달성한다.
사용자 유형을 나눌 때 주의할 점은 무엇인가? 좋은 사용자 유형과 나쁜 사용자 유형을 판단하는 기준은 무엇인가?
사용자 유형을 나눌 때 나이로 구분하거나 직업으로 구분하는 것처럼 일반적인 유형으로 나누면 안된다. 분석 대상 제품의 특화된 목적과 태스크를 도출하는 데 도움이 되지 않는다. 장바구니 목록 유무, 구매량, 쇼핑 능숙도와 같이 사용자 특성을 도출하자
태스크 수행 시나리오를 기술할 때 포함되어야 하는 내용은 무엇인가?
태스크가 어떤 절차로 수행되는지, 태스크 수행 과정에서 사용자가 경험하는 불편, 예기치 않은 시나리오, 정상적 시나리오, 비정상적 시나리오
5. 사용자 요구사항과 설계원칙을 반영해서 인터랙션 디자인한다.
인터랙션 디자인에서 확산과 수렴의 과정이란?
확산: 태스크 분석을 통한 사용자 요구사항의 도출
수렴: 확산을 인터페이스 요구사항으로 변환하는 것
태스크 구조와 기능 구조간의 차이는 무엇인가?
태스크 구조는 사용자가 현재 태스크를 수행하는 구조를 의미.
기능 구조는 사용자가 수행하는 태스크를 지원하기 위해 디자이너가 만들 인터페이스 구조를 나타낸다.
와이어프레임 스케치에 고려해야 할 사항들은?
- 메타포를 활용하라.
- 디폴트 모드를 신중하게 결정하고 사용자 이력에 따라 똑똑하게 변화하라.
- 사용자가 기억하게 하지 마라.
- 사용자의 실수를 방지하거나 복구할 수 있는 방법을 제공하라.
- 모든/ 특정 사용자의 모든 테스크 상황 사용케이스 시나리오를 고려하라.
- 인터페이스를 접어라.
- 사용자의 태스크 수행에 연속성을 부여하라.
- 팝업을 최소화하라.
- 모든 상황에서 반드시 의도된 행위를 유발하도록 설계하라.
- 태스크 수행 절차를 일관되게 하라.
페이퍼 프로토타입으로 어떻게 인터랙션을 평가하는가?
종이에 스케치한 와이어 프레임 뿐만 아니라 실제 인터랙션 과정에서 등장하는 인터페이스 위젯들을 종이로 만들고 컴퓨터 역할을 맡는 사람이 인터랙션을 시뮬레이션하여 사용자가 실제 인터페이스를 사용하는 경험을 평가한다.
UI 시나리오 문서와 태스크 기반 인터랙션 디자인 과정의 단계는?
UI 시나리오 문서는 인터랙션 디자이너가 디자인 과정을 효율적으로 관리하고 다른 설계자와 커뮤니케이션을 정확하게 하기 위해 인터랙션 디자인의 결과를 정리한 문서이다.
태스크 기반 인터랙션 디자인 과정은 기능구조, 대표화면, 화면간 인터랙션 흐름, 예외케이스로 되어있다.
6. 페이퍼 프로토타입을 직접 만들어서 테스트한다.
페이퍼 프로토타입이 활용되는 인터랙션 디자인 중 두 단계는 무엇인가?
첫 번째는 디자인 콘셉트의 결정단계. 제품의 매력도와 독창성을 결정짓는 매우 중요한 요소. 여러가지 가능성을 열어두고 충분히 탐구해야 한다. 사용자에게 적절한 갯수의 대안을 물어보고 피드백을 받는다.
두 번째는 인터랙션 디자인에서 사용성 문제를 파악하는 단계. 인터랙션이 가능한 페이퍼 프로토타입을 제작해서 테스트 진행. 창의적인 생각을 얻기위해 가지고 노는 설계도구
페이퍼 프로토타입을 활용할 경우, 장점과 단점은?
장점
- UI 콘셉트, 기능/ 버튼 배치, 요구정보, 레이블 피드백 적합성 등을 신속하게 평가하는데 유용
- 설계를 수정하는데 드는 비용이 적어 반복적인 개선이 가능하다. 종이는 쉽게 버릴 수 있어 반복적인 수정과 개선에 대한 거부감 혹은 마찰이 적기 때문이다.
- 인터랙션 디자이너 간 협업개발이 용이하다. 컴퓨터 디스플래이를 하나 보면서 평면상 작업하는 것보다 함께 만들면서 입체적으로 작업할 수 있기 때문이다.
- 개발팀 간 혹은 고객간 커뮤니케이션을 원활하게 해준다.
- 디자이너가 가지고 놀수 있어 디자인 프로세스에 창의성을 더해준다.
단점
- 사용자 조작 후 다음화면/ 위젯이 나오기까지 지연시간이 존재한다.
- 복잡하고 미묘한 인터랙션 또는 변화, 스크롤 등을 완벽하게 묘사하기 어렵다.
- 반응시간, 키 입력, 마우스 에러, 컨트롤 사이즈 등을 설계 변수로 반응하기 어렵다.
페이퍼 프로토타입으로 테스트해야 할 태스크들의 종류는?
사용자가 자주 사용하는 태스크, 사용성 문제가 의심되는 태스크, 새로이 변경 혹은 개선된 부분 등을 중심으로 선별적으로 진행
태스크와 태스크 시나리오의 차이는?
태스크 : 사람들이 테스트하는 대상 예를 들어 ‘마트 지도 검색하기’
태스크 시나리오 : 구체적인 사용상황, 기능명칭이 언급되지 않고 명확하고 간결하다. 예를 들어 ‘마트 앱에서 미용실로 찾아가는 길을 알아보시오’
페이퍼 프로토타입을 가지고 사용자와 인터랙션할 때 가장 명심해야 할 사항은?
사용자의 선택과 입력사항을 정확하게 보여준다. 조작 가능성에 대한 명확한 어포던스를 제공, 그렇지 않으면 테스트 중인 사용자는 무언가 보고도 누를 생각을 하지 않는다.
테스트 시에 사용자가 꼭 하도록 유도해야 할 행동은 무엇인가?
생각과 행동말하기를 유도한다. 사용자가 테스트 수행과정에 보이는 행동의 의도와 사용자가 경험하는 어려움을 더욱 잘 파악하기 위한 방법이다.
7. UI 시나리오를 작성하여 개발자, 디자이너와 효율적인 커뮤니케이션을 한다.
UI 시나리오 문서에 대한 여러 관련자들의 요구사항은 어떻게 다른가?
소프트웨어 개발자:
UI 요소의 표준화를 통한 개발 효율성, 제품 일관성 확보 → 자주 바꾸지 마라
UI 스펙을 소프트웨어 코딩과의 연계 → 지원도구 개발!
상품 기획자: 경쟁력있는 기능 발표 → 차별화!
품질 관리자: 완성도 높은 상세한 UI 스펙 → 자세히! 빠진 것 없이 기술하라
모범적인 UI 시나리오 문서의 효과는?
요구사항 오류의 감소, 의사소통 오류의 감소, 개발과정에서의 재작업 감소, 혼선 최소화, 불필요한 기능의 최소화, 시나리오 작성과 소프트웨어 개발 비용 절감, 개발 속도 향상, 유관 부서 만족도 제고
UI 시나리오 문서에서 대표화면에 포함되어야 할 내용은?
정보 체계(어떤 정보들이), 레이아웃 구성(어떤 배치로), 관련 콘텐츠(어떤 텍스트, 이미지, 아이콘, 에니메이션 등), 기능, 관련 UI 요소들(라디오 버튼, 체크박스)을 명확하게 명시
대표화면을 먼저 작성하는 이유는?
첫 째, 나중에 상세 인터랙션 흐름의 시나리오 속에 반복적으로 사용되기 때문이다.
둘 째, 개발 프로세스의 효율성 때문이다. GUI 디자이너에게는 상세 인터랙션 흐름보다 화면의 레이아웃 그리고 필요한 이미지와 아이콘들이 정의 되어 있는 대표화면이 더 중요하다.
UI 시나리오 문서의 인터랙션 흐름과 페이퍼 프로토타입 사이의 관계는?
인터랙션 흐름은 페이퍼 프로토타입에 의해 발견된 문제점들을 모두 개선한 최종 인터랙션을 설명하는 부분, 화면내 또는 화면간 인터랙션의 순서, 분기, 조건 그리고 루프에 대한 부분
소프트웨어 개발팀이나 품질관리 부서에서 UI 부서에 가장 불만을 많이 드러내는 점은?
새로운 기능이나 서비스가 추가될 때, 다양한 케이스들에 대해서 어떻게 동작할지에 대한 정의를 기술
UI 시나리오 문서가 가져야 할 특성 중 하나인 수정용이성 modifiable의 뜻은?
변경이 용이해야 한다. 수정/ 개선 사항을 시나리오에 반영하는 것이 수월해야 한다. 하나의 동일한 사항을 수정하느라 문서 여기저기를 편집하는 것은 좋지 않다.
[UX 디자인 7가지 비밀]을 참고한 글입니다.
