GUI 상세 디자인 UX 디자인의 기본 명제를 이해하고 있다면 프로세스를 이해하는 것은 간단하다. 사용자를 이해하고 그것을 디자인으로 연결시키면 되는 것이니 말이다. 그러나 디자인은 ‘자동판 매기(Bending machine)’가 아니다. 사용자 경험을 이해했다고 해서 자동으로 디자인이 만 들어지지는 않는다는 얘기다. 디자이너 개인의 창의성이나 지식, 경험 등이 ‘의도’를 형 성한 뒤, 이 ‘의도’를 통해 디자인이 만들어지는 것이다. “사용자들의 경험을 이해하고, 그 이해를 바탕으로 디자인 한다.” 사용자 경험을 이해하는 과정에는 목표 수립, 제반 상황 분석, 이슈 도출, 필드리서치, 모델링 등의 단계(Phase)가 있다. 뒷부분은 ‘사용자 경험 이해’를 바탕으로 디자이너의 의 도를 효과적으로 표현하는 ..
전반적인 일관성을 제공 1. 일반적인 일관성을 제공해야 한다 다양한 Task 수행시 지각-해석-평가-행동-실행-기억 순으로 인지한다. 쉽게 인지하고 기 억부담을 줄이기 위해 일관된 표현과 사용방식을 사용한다. 레이아웃등을 시각적으로 표현하기 위해 폰트, 색등 적절하게 사용해야 한다. 설계 가이드 는 다음과 같다 UX 제작 GUIDE는 다음과 같다. (1) 레이아웃, 아이콘, 폰트, 타이틀, 메시지위치, 용어 등 시각적 요소를 일관되게 사용한다. (2) Task 수행절차 및 조작 방식(제스처, Hard key 포함)은 일관되게 제공한다. (3) 동일기능의 경우 가로/세로 화면 전환 시 전혀 다른 방향과 위치에 제공하지 않는다. 2. 물리적 특성을 고려하여 최적화된 동선을 제공하여야 한다. UX 제작 GUI..
현 상태 및 정보의 단서를 명확하게 표시 1. 사용자가 처한 상황과 제품의 상태를 사용자가 직관적으로 알 수 있도록 화면에 표시 한다. 2. 미리 다음 정보에 대한 예상이 가능하도록 버튼, 링크등에 단서를 제공한다. 3. 사용자가 이해할 수 있는 친숙한 용어를 사용한다. 4. 실제 사물이 가지는 모양, 컬러, 움직임, 기능을 메타포로 활용한다. 5. 아이콘만으로 의미전달이 불충분할 경우 텍스트로 변경 또는 병행사용을 고려한다 SS Galaxy S4(좌)Apple iPhone iOS7(우)의 경우 죄축 삼성 스마트폰의 경우 패턴 변경 메뉴 에 대한 힌트가 전혀 없다.(즉, ‘패턴’ 진입하여 새로 만들어야한다.) 우측의 경우 ‘암 호잠금’에 들어가면 바로 찾을 수 있다. 여기서 애플과 안드로이드의 UX의 차..
모바일에서 실현되는 UI 화면 사용자는 그들의 디바이스에서 당신의 앱을 사용하는 동안 편안함을 느낄 수 있어야 한다. 사용자가 앱을 사용하는 도중 사용자가 원하지 않는 불필요한 작업(Task)을 만들어내는 상 황은 절대 허용하지 않는다 - 평범하거나 절대적 위치를 요구하는 레이아웃을 만들지 말라 - 텍스트에서 픽셀단위의 사용을 지양하고, DIP(dot in pixel, 밀도단위)를 사용한다. - 다양한 크기의 이미지 리소스를 만든다(xhdpi, hdpi, mdpi, ldpi) - 버튼이나 리스트 아이템등의 선택하는 타겟은 크고 명확하게 사용한다. - 적절한 여백(Margin)과 간격(Padding)을 사용한다. - 사용자의 액티비티 스택(동작 히스토리)을 적절히 관리한다. - 디바이스의 방향 전환을 적절..
UI/UX 콘셉트 기획안에 따른 디자인 및 시각적 요소 도출 1. 디자인 요소 도출 UX는 멋지고 Fancy한 디자인을 만드는 것이 목표가 아니라, 탁월한 사용자 경험을 제공 하는 게 목표이다. 탁월한 사용자 경험을 제공하기 위해서는 사용자를 깊이 있게 이해하 는 것이 필요하다. 비즈니스 목표와 도전과제가 정해졌다면 사용자에서 출발한다. 사용자 를 깊이 있게 이해하는 것은 특정한 컨텍스트에서 사용자들이 보이는 인지적/감성적/행위 적 특성을 발견하는 일이다. 인지적/감성적/행위적 특성은 니즈, 동기, 태도, 이용행태로 나누어서 분석될 수 있는데, 여기에서 가장 중요한 것이 사용자의 니즈이다 GUI 디자인을 위하여 비즈니스의 목표, 디자인의 원칙, 사용자에 대한 공감이라는 생각으 로 다음과 같이 디자인 요소..
UI/UX 콘셉트 기획안에 따른 GUI(Graphical User Interface) 디자인 요소 얼마나 멋진 앱을 만들든지 간에 다음의 내용들은 UX 디자인적인 접근이 아니다. • 사용자 중심 디자인을 하겠다는 것은 ‘선언’이 아니다 • 사용자의 경험을 고려하겠다는 ‘태도’도 아니다 • 실제 사용자들의 경험을 조사하고 그 내용을 기반으로 디자인을 하는 것이 ‘사용자 중심 디자인’, 또는 UI/UX 디자인인 것이다. • 권위 있는 전문가의 의견이 완벽한 UI/UX를 디자인 할 수 있는 것은 반쪽자리 접근일 뿐이다. • 전문가의 경험이 UX 사용자의 경험이 아니다 • 전문가는 자신의 경험을 통한 짐작일 뿐이지 확신하지 못한다. • 사용자들의 경험은 시대 흐름과 같이 변화한다. • 전문가들이 세운 이론은 문..
사이트맵과 태스크 플로우 1. 사이트맵 정의 웹사이트의 특정 영역을 대표하는 페이지들을 시각적으로 보여주는 것을 의미한다. 회사 조직도처럼 생겼으며 사이트의 수직적인 구조를 보여준다 2. 태스크 플로우 정의 사용자들이 웹사이트를 항해하는 중 취하는 경로나 과정을 보여준다. 사용자의 옵션이나 경로를 상세히 보여주기 위해 제작된다. 시나리오 기반의 태스크 분석 1. 정의 (1) 사용자의 니즈와 요구사항을 기반으로 사용자가 우리 서비스를 이용하여 어떤 작업을 수행하도록 할 것인가 정해야 하는데 이를 태스크(과업)이라고 한다. (2) 이 태스크(과업)을 누가 어떤 상황에서 어떻게 수행하는가를 그리는 과정이 시나리오 작업이다. (3) 태스크(과업) 분석은 이 서비스를 통하여 앞에서 정의한 페르소나가 무엇을 할 수..
구조도 (사이트 맵) 1. 구조도 정의 (1) 정보 공간의 형태를 개괄적으로 보여주며, 각각 사이트 개발자와 사용자를 위한 요약 도 기능을 한다. (2) 페이지와 다른 콘텐츠 요소들 간의 관계를 보여주기 때문에 조직화, 내비게이션, 레이 블링 시스템을 표현하는 용도로 사용하는 것이다 2. 구조도 설계 (1) 상위 레벨 구조도 메인 페이지에서 시작해서 하위 페이지들을 추가하고 단순성을 유지하며 구조에 계속 적으로 살을 붙여 나가며 사용자의 예상 접근 경로뿐 및 조직화 및 콘텐츠 관리에 대 한 논의를 통해 구조도를 그려 나간다. 구조도는 손으로 그릴 수도 있지만 비지오나 옴니그래플과 같은 다이어그램을 그리는 소프트웨어를 사용 할 것을 권한다. (2) 상세 구조도 전체 사이트에 대한 계획을 다루며 메인 페이지..
정보 조직화 설계의 종류 1. 순차적 구조(계열 구조)는 정보를 한 페이지씩 한 방향으로 이동하는 구조이다. 카테고 리 화면에서 선택하여 목록 화면으로 이동하고, 목록 화면에서 항목을 선택하여 조금씩 자세하게 보는 과정이 이에 해당한다. 2. 계층적 구조(모빌 구조)는 각 상위 메뉴에서 하위 메뉴로 Top-Down 방식으로 이동하는 구조이다. 한 화면에서 다양한 기능으로 분기되면서 구성되는 형태이며 여러 레벨의 복 잡한 메뉴 구조를 표현할 때 사용된다. 각 메뉴마다 또 다른 구조를 안에서 포함한다. 3. 그리드 구조는 바둑판식으로 수평과 수직 형태로 연결되어 있는 구조이다. 정보 데이터 를 그리드 구조로 정형화하기 쉽지 않으며 사용자가 분류기준을 모르면 이해하기 어려 울 수 있다. 4. 네트워크 구조는 ..