UI 디자인이 성공하기 위한 요건

GUI 상세 디자인

UX 디자인의 기본 명제를 이해하고 있다면 프로세스를 이해하는 것은 간단하다. 사용자를 이해하고 그것을 디자인으로 연결시키면 되는 것이니 말이다. 그러나 디자인은 ‘자동판 매기(Bending machine)’가 아니다. 사용자 경험을 이해했다고 해서 자동으로 디자인이 만 들어지지는 않는다는 얘기다. 디자이너 개인의 창의성이나 지식, 경험 등이 ‘의도’를 형 성한 뒤, 이 ‘의도’를 통해 디자인이 만들어지는 것이다.

“사용자들의 경험을 이해하고, 그 이해를 바탕으로 디자인 한다.”

사용자 경험을 이해하는 과정에는 목표 수립, 제반 상황 분석, 이슈 도출, 필드리서치, 모델링 등의 단계(Phase)가 있다. 뒷부분은 ‘사용자 경험 이해’를 바탕으로 디자이너의 의 도를 효과적으로 표현하는 것과 관련돼 있다. 서비스 디자인에서 출발해 IA, 인터랙션 디 자인, UI 디자인, 그래픽 디자인까지 체계적으로 접근하는 것은 물론 반복적인 프로토타이 핑과 테스트 과정을 통해 최적의 결과를 창출해 나가는 작업이 이뤄진다.

아르키메데스는 목욕탕에서 물이 넘치는 것을 보고 질량을 측정하는 방안을 착안했고, 존 틴 달은 먼지와 입자들이 부딪혀 산란하는 햇빛 때문에 하늘의 색이 파랗다는 것을 밝혀 대기오염도와 물의 청정도 측정에 공헌했다. (출처: 로버트 루트번스타인 著 “생 각의 탄생”)

• 주의 깊은 관찰은 사용자를 이해하는 가장 중요한 출발점이다.

• 단지 피상적인 행태나 결과만을 분석하는 것이 아니라 그 이면에 숨겨진 본질을 밝혀내 고 주변의 다른 영향요소들과의 관계를 밝혀야만 비로소 사용자를 올바르게 이해할 수 있다.

• 관찰할 때는 작은 단초도 놓쳐서는 안 된다. 작은 단초에서 큰 창의력이 출발되기도 한다.

• 특히나 사용자에 대한 관찰은 피상적으로 접근했을 때는 직접적인 기대(Explicit Needs) 나 인지된 니즈(Inplicit Needs) 밖에 볼 수 없다.

• 사용자의 잠재된 니즈(Latent Needs)를 파악하려면 신중하고 세심한 관찰이 필요하다. iOS의 경우 개별 UI 요소에는 큰 변화가 있었지만 UI 관련 API 자체에는 큰 변화가 없다. 다음은 iOS의 Flat Design에 대한 예제이다.

사용자에게 어떤 서비스를 제공할지 고민하는 것으로. 서비스 디자인 방법론과 헷갈릴 수 있는데, 진행 방식이나 서비스를 도출하는 절차가 다소 다르다. UX 디자인이 주로 UI나 인터랙션을 다룬다는 오해와 상관없이 서비스 디자인은 UX 디자인에서 매우 큰 비중을 차지한다.

 

UI 디자인이 성공하기 위해서 필요한 요건은 무엇인가?

1. 명확한 목표

UX Design은 Bottom-up 기반이기 때문에 명확한 목표가 중요하다. 비즈니스적으로 불확실 한 도전에 UX Design을 적용했다고 해서 프로젝트가 성공할 수는 없다. 명확한 시장 선정 과 비즈니스 목표 수립이 필요하다. 가령 새로운 브랜드 커뮤니케이션을 위해서 어떤 채널 을 이용할 지 확신할 수 없다면 UX 프로젝트가 그 해답을 제시해줄 수 있다. 그러나 비즈 니스 목표도 불분명한 상태에서 모든 것을 UX Design에 맡기는 것은 잘못된 접근이다. 2013년 가을 이후 다양한 크기의 제품 군 출시를 준비하고 있어 iOS 6의 오토 레이아웃, 콘스트레인트를 더욱 강화한 상대적 레이아웃을 보편화하였다. 다음은 iOS7의 Dynamic UIKit에 대한 샘플이다

또한, iOS의 경우 노티피케이션과 연동해서 좀 더 실용적인 멀티태스킹 환경 제공한다. 다 음은 그 실 예이다.

 

2. 구체적인 이슈

두리뭉실한 이슈를 가지고 리서치를 진행한다면 어떻게든 도움은 되겠지만 원하는 성과는 기대하기 힘들다. 리서치는 통계분석이나 설문조사, 벤치마킹을 통해서는 해결할 수 없는 구체적인 이슈를 해결하는 과정이다

 

3. 적절한 리서치 대상자 선정

사용자 전체를 만난다는 것은 불가능하다. 또한, 불필요한 일이기도 하다. 리서치가 신뢰 할 수 있고 리서치 결과가 의미 있기 위해서는 적절한 대상자를 선정하는 게 관건이다.

 

4. 깊이 있는 사용자 경험 이해

사용자들의 니즈 뿐만 아니라 이용 동기나 행태, 태도 등에 대한 포괄적인 이해가 중요하 다. 단지 사용자들이 현재 겪고 있는 문제점을 해결한다는 관점에서만 접근한다면 혁신적 인 결과를 얻기 힘들다. 다양한 리서치 기법을 활용하여 사용자들의 경험을 깊이 있게 파 악하는 과정이 중요하다.

 

5. 체계적인 기법 활용

UX Design에는 사용자 경험 이해를 디자인으로 연결시키는 뛰어난 기법들이 있다. 가령 페르소나를 잘 정의한다면 어떤 사용자들을 타겟으로 삼아서 제품을 디자인할 지가 분명 해진다. 사용자 시나리오는 전체적인 이용 흐름 관점에서 새로운 아이디어들을 도출할 수 있는 기회를 제공한다. UX Design의 장점을 충분히 활용하기 위해서는 체계적인 기법 활 용이 중요하다

 

6. 풍부한 리소스 활용

뛰어난 ‘사용자 경험 이해＇가 빈약한 ‘리소스 풀(pool)’ 때문에 가치 절하될 수 있다. 사용자 경험을 아무리 잘 이해했다고 하더라도 결국 우리의 목적은 그것을 해결할 디자인 을 만드는 게 목적이기 때문이다. 기술이나 각 디자인 영역별 전문적인 역량은 물론 최신 트랜드에 대해서도 풍부한 리소스가 있어야 한다.

 

7. 활발한 프로토타이핑

모든 것이 준비됐을 때 프로토타이핑을 한다는 것은 무리가 있다. 어느 시점에서든 활발 하게 프로토타이핑이 시도되고 팀원들 사이에서 토론되어져야 한다. 화면 디자인을 하기 위한 중요한 요소 로 의미 별 정보 그룹으로 구성하여 배치하는 방법 이 있다.

 

(1) 중요도, 사용빈도, 연관성, 조작순서 등을 고려하여 의미단위로 묶어서 배치한다.

- 조작(이동, 편집, 삭제), 탐색(검색, 정렬), 보기(날짜별, 위치별) 등 정보 속성에 따라 그룹핑하여 배치한다.

- 전체 조작 관련 기능(정렬, 전체 삭제 등)과 선택된 콘텐츠 조작 관련 기능(편집, 삭 제 등)을 구분하여 배치한다.

- 추가/삭제(제거, 지우기)와 같은 상대적인 기능은 하나의 Set으로 묶은 후 빈도 별로 배치한다.

(2) 정보 그룹과 그룹 사이에는 구분선 또는 여백 등을 통해 시각적으로 구분시킨다.

(3) 핵심 기능이 되는 20%를 현화면내 제공하고, 그 외에는 옵션 또는 하위Depth에 제공 한다.

* 80/20법칙: 핵심이 되는 20%를 정의하고 중요하지 않은 80%를 최소화하거나 제거한다.

물리적 특성을 고려하여 최적화된 동선을 제공하여야 한다. 다음의 내용을 참조한다.

• 화면 설계 전기기에 적합한 그립 방식, 운지 가능범위 등을 정의하여 최적의 동선을 파악한다.

• 주요 Control 기능은 조작이 편리한 영역에 제공한다.

• Main task 수행 시 진행단계에 따라 동선의 변화를 크게 제공하지 않는다. 사전 지식 없이도 조작과 결과를 예상하도록 디자인해야 한다.

• 현실세계에서 동작하는 방식을 기반으로 조작과결과가 자연스럽게 대응되도록 한다.

• 정보특성과 사용자 멘탈 모델에 맞게 논리적인 구조로 설계한다.

• 모든 상황에서 반드시 의도된 행위를 유도하도록 설계한다.(Affordance) 기억에 의존하지 않고 조작하게 하도록 설계하여야 한다

 

UX 제작 GUIDE는 다음과 같다

• 기억해 내기 보다는 선택하도록 만든다.

* 사람은 이전 경험을 기억 속에서 꺼내는 회상(Recall)보다 단서를 보고 맞는지 알 아보는 재인(Recognition)을 훨씬 쉽게 느낀다.

• 기억이 용이한 Chunk 개수는 4±1개임을 고려하여 관련정보, 기능을 묶어야 한다. 용이한 조작과 직관적 사용을 위한 부하를 줄여야 한다. 부하의 종류 및 특징

• 인간공학적 관점에서 가장 소모적인 부하 3가지는 운동, 시각, 인지부하이다. 각 부하는 각기 다른 양의 정신적 자원을 소모하는데 운동<시각<인지 부하순으로 커진 다. 따라서, 터치 횟수가 많더라도 사용자가 그만큼 생각, 기억할필요가 없다면 더 쉽 게 느낄 수 있다.

• 디자인 시 시각/운동 부하를 높이고 인지부하를 줄이면 전체 부하를 최소화시킬 수 있다.

• 운동 부하에서 다른 형태의 운동으로 전환하는 형태는(트랙패드와 키보드, 화면 터치 와 하드키 전환 등) 단순 운동보다 사용자의 에너지를 소모시키므로 최소화시키는 것이 좋다.

• Task의 Depth를 가능한 한 최소화하고, 사용 빈도가 높은 기능은 상위Depth에 제공 한다.

* 경로나 절차를 3단계이상 들어가면 인지적으로 길을 잃어버린다.

• 빠른 정보 접근을 위해 실시간 검색, 검색기록, Indexing, 미리보기등을 제공한다.

• 사용 빈도가 높은 기능은 단축실행 방법(제스처, Shortcut 등)제공을 고려한다.

• 조작단계와 사용자 입력 정보량을 최소화하기 위해자 동화(실시간검색, 자동입력, Picker 등)를 고려한다.

• 핵심에 집중하여 불필요한 기능과 반복 정보전달을 제거하고 불완전한 기능은 제공 하지 않는다.

단축경로, 자동화, 불필요한 부분 제거 등을 통해 접근성을 높이기 위해서는 다음의 내 용을 확인해야 한다.

효율성을 높이기 위해서는 맥락을 고려해야 한다.

즉, 일관성도 중요하나 Task의 맥락이 더 중요하다.

효율성과 사용자의 만족을 높이기위해 개인의 문화나 특성, 상황 등의 요소를 반영한다. 수행의 연속성을 부여하기 위해서는 다음의 가이드를 참고하여 디자인하여야 한다

• 기본적으로 Task 수행 시 이전 사용 상태를 유지하며, 업그레이드 후에도 기존 사용 자 설정을 유지시킨다.

• 팝업과 같이 시스템에 의해 중단된 느낌을 제공하는 것은 최대한 지양한다.

ex. 사용자의 행동 변화가 필수적인 경우 Action Requested Type(전창/팝업), 그 외에 는 Awareness Type(Banner, Badge)으로 제공한다.

• 정보의 효용성과 알림의 방해도 간의 균형을 고려하되, 기본적으로는 방해도를 최소 화하거나 사용자가 설정 할 수 있게 한다. 단축 경로, 자동화, 불필요한 부분 제거 등을 통해 접근성을 높일 수 있다. 이렇게 디 자인하기 위해서는 다음의 순서로 디자인하여야 한다.

• Task의 Depth를 가능한 한 최소화하고, 사용 빈도가 높은 기능은 상위Depth에 제공 한다.

* 경로나 절차를 3단계 이상 들어가면 인지적으로 길을 잃어버린다

• 빠른 정보 접근을 위해 실시간 검색, 검색 기록, Indexing, 미리 보기 등을 제공한다.

• 사용 빈도가 높은 기능은 단축 실행 방법(제스처, Shortcut 등) 제공을 고려한다.

• 조작 단계와 사용자 입력 정보량을 최소화하기 위해 자동화(실시간검색, 자동입력, Picker 등)를 고려한다.

• 핵심에 집중하여 불필요한 기능과 반복 정보전달을 제거하고 불완전한 기능은 제공 하지 않는다

맥락을 고려하여 효율성을 높여 설계해야 한다.

일관성도 중요하나 Task의 맥락이 더 중요하다.

효율성과 사용자의 만족을 높이기위해 개인의 문화나 특성, 상황등의 요소를 반영해야 한다.

수행의 연속성을 부여하여 설계해야 한다.

다음의 설계 가이드를 따라한다.

 

UX 제작 GUIDE는 다음과 같다

• 기본적으로 Task 수행시 이전 사용 상태를 유지하며, 업그레이드 후에도 기존 사용 자 설정을 유지시킨다.

• 팝업과 같이 시스템에 의해 중단된 느낌을 제공하는것은 최대한 지양한다. ex. 사용자의 행동변화가 필수적인 경우 Action Requested Type(전창/팝업), 그 외에 는 Awareness Type(Banner, Badge)으로 제공한다.

• 정보의 효용성과 알림의 방해도간의 균형을 고려하되, 기본적으로는 방해도를 최소 화하거나 사용자가 설정할 수 있게 한다

전반적인 일관성을 제공하여 GUI를 설계해야 한다.

다양한 Task 수행 시 지각-해석-평가-행동-실행-기억순으로 인지한다. 쉽게 인지 하고 기억부담을 줄이기 위해 일관된 표현과 사용 방식을 사용한다.

동일한 의미와 기능은 동일한 시각적 표현과 방식으로 제공하여 한다.

 

다음의 UX 설계 가이드를 따라한다

• 레이아웃, 아이콘, 폰트, 타이틀, 메시지위치, 용어 등 시각적 요소를 일관되게 사용 한다.

• Task 수행 절차 및 조작방식(제스처, Hard key 포함)은 일관 되게 제공한다.

• 동일기능의 경우 가로/세로 화면 전환시 전혀 다른 방향과 위치에 제공하지 않는다.

사용 시 확신을 제공하고 에러를 최소화하여야 한다. 적절한 Feedback은 조작에 대한 자신감을 제공하고 실수를 줄여준다. 오류는 최대한 적게 설계해야 한다, 혹시, 발생하 더라도 치명적이지 않게 디자인해야 한다. 다른 원칙에 위배되더라도 오류를 줄이면 더 큰 사용성 향상을 얻을 수 있다. 먼저 시스템 상태와 조작에 대한 명확하고 즉각적 인 피드백을 제공하여야 한다

다음의 UX 설계 가이드를 따라한다.

 

UX 제작 GUIDE는 다음과 같다.

• 주어진 실행 순간의 반응과 결과, 진행 상황을 즉시 보여줄 수 있도록 한다.

* 0.1초내 피드백 받으면 즉각적이라는 느낌을 생성할 수 있다.

• 실행 결과는 가능한 한 그 대상에 직접적으로 갱신하여 표현 한다.

• 시각적으로 즉시 확인하기 어려운 경우에는 소리와 진동등을 추가로 제공하는 것을 고려한다.

• 과도한 Feedback은 시각적 안정성을 해치고 사용자가 귀찮게 느낄 수 있으므로, 인 지할 수 있는 최소한의 Feedback을 제공하여야 한다.

제약과 안내를 통해 에러를 방지하고 대처할 수 있는 GUI를 설계해야 한다. 다음의 UX 설계 가이드를 따라한다. UX 제작 GUIDE는 다음과 같다.

• 오류 발생 가능성이 있는 상황에 서는 기능 사용 금지, 기능 제한 등 제약을 활용한다.

• 파급 효과가 큰 위험한 기능은 신중하게 사용하도록 Depth, 확인 팝업 등으로 접근하기 어렵게 한다.

• 주의 집중이 어려운 경우, 동일 정보를 다른 형태(텍스트&그림, 색상, 모양 등)로 중 복 제공하는 것을 고려한다. • 하나의 동작으로 여러 가지 결과를 만들지 않는다.

• 오류 발생 시 이전 상태로 복구 가능한 방법을 제공한다.

• 오류 메시지는 발생 이유와 대응 방법을 사용자가 이해할 수 있게 표현한다.

기대 이상의 감성적 만족을 제공하도록 설계해야 한다.

사용자의 감성적 만족을 끌어내기 위해 아름다운 그래픽, 감성적 자극, 재미있는 인터 랙션 등을 활용한다.

긍정적이고 풍부한 감각적 경험을 선사하도록 GUI를 설계하도록 해야 한다. 다음의 UX 설계 가이드를 따라한다

 

UX 제작 GUIDE는 다음과 같다.

• 색다른 표현, 감성적 인터랙션, 복합적 감각 자극 등으로 사용자에게 신선하고 즐거 운 경험을 제공한다.

• 작은 부분까지 배려를 느끼게 한다.

• 번거로운 설정단계, 부정적 이미지 및 언어 사용 등을 지양한다

 

8. 다양한 기기의 특성을 반영하여 GUI를 설계하여야 한다.

즉, 기기의 물리적 특성과 사용 환경을 반영하여 사용자에게 최적화된 경험을 제공한다. 스마트폰의 경우 Smartphone 특성 분석 및 Principle 도출하도록 설계하여야 하며, 물리적, 사용 행태적, 환경적 요소를 기준으로 Phone 특성 분석 및 정의를 하여야 한다.

9. 물리적 특성과 빠르게 전환되는 GUI 설계를 해야 한다.

물리적 특성을 고려하여 최적화 된 동선을 제공하도록 GUI를 설계하여야 한다.

즉, 항상 소지하고 정적이고 동적인 환경에서 사용함을 고려하여 한손/ 양손 사용시의 동 선과 단순한 조작 방법을 제공하도록 설계하여야 한다.

다음의 UX 설계 가이드를 따라한다

 

UX 제작 GUIDE는 다음과 같다

• 한 손 및 양손 조작시의 운지 동선을 모두 고려해야 한다.

• 자주 접근하는 Common Control은 가능한 한 손 조작 영역 내 배치한다.

• 조작 동선은 컨텐츠 영역을 최대한 가리지 않는다.

• 기본 터치 영역은 엄지 손가락 터치 영역 기준으로 제공한다.

• 기본적으로 Portrait mode를 기준으로 디자인한다.

 

Task를 빠르게 실행하고 전환되게 GUI를 설계하여야 한다.

 

이동 중의 사용이 많아 짧은 시간 동안 필요한 작업을 수행해야 하는 경우가 많다. 또한, 사용 기능도 타 기기에 비해 많은 편이다.

사용자가 가능한 한 빨리 원하는 Task를 수행할 수 있게 디자인 하여야 한다. 다음의 UX 설계 가이드를 따라한다.

 

UX 제작 GUIDE는 다음과 같다

• Lockscreen의 빠른 해제, Shortcut 제공 등으로 App 진입 단계를 최소화한다. ex. LG 단말기의 knock on등

• Multitasking 시 App 전환 및 실행방법은 한손 조작기준으로 단순하고 빠르되 편안한 동 선으로 제공한다.

• Task의 빠른 실행을 위해 Homescreen에 App 및 Widget의 추가/편집 방법을 쉽게 제공 한다. ex. LG 단말기의 Folder, App에서정렬제공, widget 묶어주기, App 검색 후Homescreen 등록 등이 해당된다.

• Task 실행과 전환 시 애니메이션 효과 등으로 체감 시간을 최대한 짧게 만든다. 개인에 특화된 사용자 경험을 디자인하는 것이 최근 GUI 디자인 설계의 흐름이다. 최근 사용되는 모바일 디바이스의 경우 휴대성이 높아 사용자가 처한 상황을 잘 파악할 수 있으며, 사용자의 개인 데이터를 축적할 수 있도록 설계되어져 있다. 이를 활용하여 개인화된 사용 경험의 폭을 넓히도록 GUI를 설계하도록 한다.

 

다음의 UX 설계 가이드를 따라한다.

 

UX 제작 GUIDE는 다음과 같다.

• 패턴해제, 지문인식 등 Privacy 기능을 강화하되 잠금 해제와 같이 자주 사용하는 Task 는 빠르고 단순한 방법으로 제공한다.

• ID 추천, PW 저장 등 매번 입력해야하는 불편을 감소시키도록 디자인한다.

• 사용자의 생활 데이터(GPS, 사용패턴기억등)를 통해 Task를 효율적으로 수행하도록 디 자인한다.

ex. 지도에서 내 위치 default로 표시, Pick me 등

 

10. 결사용 맥락에 맞는 자연스러운 경험을 제공

사용 맥락에 맞는 자연스러운 경험을 제공할 수 있도록 다음의 UX 가이드를 활용하여 설 계해야 한다.

다음의 UX 설계 가이드를 따라한다.

 

UX 제작 GUIDE는 다음과 같다.

• 다양한 Phone 사용 상황을 고려한다. 특히, 각 상황 별 주사용 기능은 가장 단순하고 효율적으로 제공한다.

* 사용 빈도가 높은 기능이 번거로운 경우, 사용 빈도가 낮은 기능보다 부정적 인식을 더 많이 유발한다.

 

다음과 같은 다양한 사용 UX들을 고려하여 설계하도록 해야 한다.

 

연락받는 상황

• 수신 메시지에 쉽게 답장을 보낼수 있게 제공한다.

• 연락하기 어려운 상황에서 바로 거절 메시지를 보내거나 연락을 보류하게 한다.

• 다양한 환경에서도 사용자가 즉시 이벤트를 확인할 수 있도록 알림(소리, 진동등) 세기 를 조절 한다.

 

음악 듣는 상황

• 이어폰 유무에 따라 자동 볼륨 값을 제공한다.

• 이어폰 연결시 사용 가능한 App을 추천 제공한다.

• 재생, 볼륨 조절 등 자주 사용하는 기능은 현재 사용하는 상태에서 바로 접근할 수 있 게 한다.

 

자기전 상황

• 사용자는 어둡고 조용한 환경에서 편한 자세로 있다는 사실을 반영하여 적절한 화면과 LED 밝기, 손쉬운 화면 회전 제어 방법을 제공한다.

• 무음 및 차단 모드등을 통해 사용자가 편안하게 수면을 취하게 한다.

• Phone의 과잉 알림 상황을 사용자가 제어하도록 디자인한다. 테이블위에서의 사용 상황

• 손에쥐고 사용하는 상황이 주로 많지만 테이블등에 놓고 사용하는 상황도 함께 고려한다. TV, Tablet 등 디바이스와 연결 상황

• 디바이스 연결 시 끊김 없는 경험을 제공한다.

• 한번의 설정으로 연결하고, 의도하지 않게 Disconnect된 경우 알림과 재연결 기능을 제 공한다.

• 모든 Device에서 알림을 제공하더라도, 하나의 Device에서 확인하면 다른 Device에서는 자동으로 알림 해제 된다

Tablet의 경우 기기의 특성을 잘 반영할 수 있도록 GUI를 설계하여야 한다.|

 

즉, 기기의 물리적 특성과 사용환경을 반영하여 사용자에게 최적화된 경험을 제공하도록 설계하여야 된다. Tablet특성 분석 및 Principle 도출하기 위해서는 물리적, 심리적, 환경적 요소를 기준으로 Tablet 특성을 분석하고 긱 특징 별로 정의하도록 하여야 한다. 물리적 특성을 고려하여 최적화된 동선을 제공하도록 Tablet 특성을 고려하여 대화면, 한 손/ 양손그립, Phone 대비 손과 화면과의 터치거리등을 고려하여 기능을 배치한다. 특히, 손가락과 팔의 움직임을 최소화한다.

다음의 UX가이드를 활용하도록 한다

 

UX 제작 GUIDE는 다음과 같다.

• 화면 설계 시 인지가 필요한 부분은 시선 영역에, 조작이 필요한 부분은 운지 범위 내 제공한다.

• Home, Back 등 전체 App에서 자주 쓰는 기능은 제스처 등을 이용하여 동선을 최소화 한다.

• 주로 측면을 잡게 되므로 운지 동선을 고려하여 아래쪽 가장자리 와 측면에 조작영역을 제공한다. 또한, 대부분 사용자는 왼손으로 잡고 오른손으로 터치하므로 우측 영역을 지 향 한다

Pop-up의 경우로 본다면 다음과 같이 설계할 수 있다.

• Action button 실행시 제공되는 팝업(확인/취소및리스트팝업)은 Action을 실행한 근처에 배치한다.

• 사용자의 주의가 필요한 알림 팝업은 상반부 중앙에 제공한다

또한, Tablet의 경우 화면 크기에 최적화하여 표현하여야 한다. 즉, 화면 크기에 맞는 정 보량과 디자인으로 높은 가독성과 안정된 시각적 영역을 제공하도록 해야 하며, 복잡한 layout과 밀집된 정보, 큰 화면 변화는 사용자에게 피로감을 주므로 지양한다

다음의 UX 설계 가이드를 따라 설계한다.

 

UX 제작 GUIDE는 다음과 같다.

• Phone에 사용 한 디자인을 단순 확대하여 사용하지 않는다.

• Phone에서는 화면 제약으로 숨겨진 기능중 빈도 높은 기능들을 넓어진 영역에 제공하 되, 황금분할과 아이콘, 텍스트간의 충분한 여백을 고려하여 배치한다.

• 적절한 여백은 사용자가 콘텐츠와 기능을 쉽게 인식하게 하므로 여백을 충분히 활용한다.

Action bar

• Phone보다 많은 버튼 개수를 제공할 수 있으며, 최대 5개까지 제공한다. (Android Design guide: 7인치이상5개유지)

• 버튼들의 영역은 Action bar 화면 너비의 50%를 넘지 않는다

 

Split view

• Navigation과 콘텐츠 관계에서 주로 사용한다.(좌:Navi, 우:Contents)

• 8인치 이상의 경우 가로 세로 모두 Split view를 제공한다.

• 황금 분할(1:1.68)을 고려하여 패널을 나누며, 우측패널이 좌측패널 영역 보다 좁아져서 는 안된다.

• Email Detail View와 같이 콘텐츠 집중이 필요하고 8인치 16:9처럼 가로 폭이 확보되지 않은 경우 Split view를 세로모드에서는 제공하지 않는다.

• 우측 패널은 좌측 패널 항목과 연관되거나 종속된 정보를 제공한다.

• 우측 패널이 좌측에 종속되어 있음을 시각적으로 명확하게 표현한다.

• 우측패널에서 Depth-in 되는 경우 우측 패널만 변경된다.

사용 목적에 따라 몰입에 맞는 디자인을 제공하기 위해서는 Phone 대비 Tablet은 콘텐 츠 소비경향이 크다. 따라서 몰입을 방해하는 요소들을 제거하고 콘텐츠 외 영역은 시 각적으로 강조하지 않아야 한다

 

UX 제작 GUIDE는 다음과 같다

• 콘텐츠 몰입을 위해 반투명 버튼, 시선을 방해하지 않는 배치, 상황에따른 컨트롤 바 숨 김 등을 제공하고, Update 알림 등 중요도가 낮은 알림은 제공하지 않는다.

• 콘텐츠 재진입시 사용자가 경험을 이어가도록 이전 상태를 기억한다.

• Landscape에서 Navigation bar 측면 배치는 하단 배치보다 시선을 분산시켜 콘텐츠 몰입을 더 저해한다

 

설계 UI GUIDELINE은 다음과 같다

All

• 콘텐츠 몰입을 위해 Navigation bar, 볼륨 및 토스트 팝업, 멀티미디어 컨트롤 바는 시 각적으로 강조하지 않는다. 콘텐츠관련 App (Video, Browsing…)

• 콘텐츠를 최대한 가리지 않도록 위/아래 양 끝 부분에 조작영역, 볼륨 및 토스트 팝업을 제공한다.

• 콘텐츠 영역확보를 위해 부가적인 영역(조작영역의 불필요한 공간, 여백등)을 최소화한다.

• 콘텐츠 감상시 Update 알림 등 중요도가 낮은 알림은 제공하지 않는다

Video player

• 조작영역은 4:3 비율의 경우 세로폭 기준 상/하단12.5% 영역에, 16:10의 경우 세로 폭 기준 상/하단5% 이하영역에 제공한다. cf. Apple iPad mini iOS7 의 경우 각각조작 영역 13%(세로폭16mm)로 제공

• 단, 터치 영역이 2줄로 구성시 최소16mm 이상의 영역 확보를 권장한다.(최소기본터치사 이즈(7mm)+여백(2mm)+기본터치사이즈(7mm)) Browser 경우 다음의 설계 가이드를 따른다.

• 가로모드에서는 조작영역을 가변적으로 숨겨 콘텐츠 view 영역을 확보한다. ex. Scroll을 통한 조작 영역 숨김/표시

• 상단 조작영역(탭, 주소창)이 2줄인 경우 최소제공 높이는 14mm를 권장한다.

(Indicator와 bezel을 고려하여 터치 최소사이즈(5mm)+여백(2mm) +기본 터치 사이즈 (7mm))

사용자에게 끊김 없는 경험을 제공하기 위해서는 기기간의 유기적인 연결로 각Device에 맞게 사용성을 극대화 한다

 

UX 제작 GUIDE는 다음과 같다.

• 블루투스등으로 Device를 연결하는 경우 한번의 설정으로 연결하고 연결 해제 된 경우 알림과 자동 재연결 기능을 제공한다.

• 폰과의 연결이 끊어지더라도 사용자는 이전에 동기화된 Data를 확인할 수 있어야한다. ex. 메시지기록등

• 모든 Device에서 알림을 제공하더라도, 하나의 Device에서 확인하면 다른 Device 에서 는 자동으로 알림 해제된다.

한계를 극복할 수 있는 직관적 사용을 위해서는 손목 착용 Device 특성을 최대한 활용하 여 사용자가 학습없이 사용할 수 있도록 해야 한다. UX 제작 GUIDE는 다음과 같다.

• 손목 착용으로 화면 확인과 양손 조작이 어려우므로 화면을 보지 않고 제스처로 조작할 수 있게 한다.

• Incoming Call이나 Event 알림시 시계 덮는 동작으로 보류등 자연스러운 사용 방법을 제공한다.

• 진동 모드에서는 진동 패턴을 달리하여 Call, Message 등 Event 종류를 구분한다.