U cmap 워크숍 강의코칭자료집 종합-v1.0(ucamp1기)

Copyright ⓒ2013 Limepaper, Inc. All rights reserved.

UX design trigger for STARTUP Teams.

[워크숍]앱센터와 라임페이퍼가 함께하는

스타트업을 위한 UX디자인 실전 워크숍


[U-Camp]는

UX전문가양성을위한교육프로그램이아닙니다. 스타트업 사업아이템의 ‘UX프로토타입-테

스트-검증’의 과정을 실습하는 워크숍으로, UX를 통해 현재 모바일앱 서비스의 UX디자인 완

성도를 높이고자 하는 스타트업(예비창업팀)을 위한 프로그램입니다.

[U-Camp]는

스타트업을 대상으로 모바일앱 서비스 개발 시 UX전략과 UX컨셉을 구체화하고,

가시적인 UX/UI디자인프로토타입제작-테스트-검증하여스타트업사업아이템의UX디자인

완성도를높일수있는실전워크숍프로그램입니다.

[U-Camp]는

UX 전문인력과 UX에 투자할 가용 리소스가 부족한 스타트업팀이 참가대상이며 ,

기본적인 UX 개발 프로세스를 습득하게 됩니다. 이를 통해 향후 스타트업 자사 제품/서비스

개발초기단계에서부터UX를고려한경쟁력있는제품/서비스를개발할수있는역량을강

화하게 됩니다.

Introduction

UX design workshop

for STARTUP Team스타트업을 위한, UX프로토타입 제작-테스트-검증 워크숍



프로그램 시간 주제및내용(실습내용)

오리엔테이션 1시간① Opening (운영방식/툴/강사 및 코칭 소개)

② 100초 스피치: 참가자 소개/User Scenario 작성 발표

UX 진단 2시간

① Part 1. UX Actually – UX진단(2시간)

- Human Needs + WIW 작성

- Killer- UX Function 도출 실습

- UX Concept charter 작성 실습

UX프로토타이핑및

UX검증

(실습)

4시간

① Part 2. UX/UI 스토리보드 – UI 설계실습(3시간)

- 사용자 Workflow 작성(템플릿제공)

- 페이퍼 프로토타이핑 - UI와이어프레임(템플릿제공)

- UI 설계 검증(5분 데이트)

② Part 3.UX/GUI 무드보드 – GUI 비주얼컨셉도출실습(1시간)

- 비주얼 컨셉 가이드(템플릿 제공)

- GUI 무드보드 작성(프로토타이핑)

- GUI 컨셉 검증(5분 데이트)

발표및평가 30분① 결과물 활용, 팀 별 발표

② 평가 및 피드백(참가 팀 간 자유토론 병행)

Wrap-Up 30분- 프로그램 평가 및 네트워킹

- 워크숍 종료 후 참가자 Human Networking 별도 진행

Introduction

UX design workshop

for STARTUP Team스타트업을 위한, UX프로토타입 제작-테스트-검증 워크숍



Objectives

+ Killer-UX value

on your business!

“UX전략과 컨셉, 비즈니스 핵심가치 찾기!＂

[U.Cmap]에서의 UX 디자인이란,

단순히＇사용자들이 원하는 것을 만든다＇가 아니라 ‘사용자니즈 –비즈니스

성과 - 기술적타당성 –시장적합성'을 결합시키는 과정과 그 성과에 대한 실제

사용자의 감각, 인지, 정서 등의 경험에 대한 feedback을 포함하여 정의합니다.

※ 거창한 '기능명세＇를 만들어 내는 것이 아니라, 비즈니스 성과를

예측/달성하기 위한 핵심 UX concept를 찾는 것이 목표.

예시)

의미 있는 신규가입자 수를 늘일 수 있는 UX가 필요하다!

거부감 없이 쉽고 편리한 로그인/다운로드 방식(UX)을 제공해 줄 수 있다면?



Objectives

+ Prototype to Test

“기대하는 UX성과에 대한 빠른 테스트/검증 수행하기!”UX 프로토타입핑(prototyping)은 사용자와 제품과 서비스가 현실세계에서 어떻

게 상호반응할 것인가에 대한 검증의 단계이자 디자인사고(design thinking)과정

입니다.

아이디어 도출과 분석이 아니라 당장 만들어 검증과 평가 받고 반영하는 것이

목표이며, 팀 동려나 고객과의 협업, 의사결정 프로세스에 보다 효과적입니다.

• Think User/Customer_사용자(고객) 중심 사고

• Act UX prototyping_시각화/테스트 실행

• Define UX key-concept_킬러 UX 컨셉 구체화 전개

• Refine Feedback_피드백/수정보완 협업


Act

RefineDefine

Think

디자인사고 Design Thinking

사람들의 진짜 요구를 만족시키는 디자인 방법

• 사람들이 일상에서 무엇을 원하고 필요로 하는지, 특

정 제품을 제작/포장/홍보/판매/지원하는 과정에서

사람들이 어떤 것을 좋아하고 싫어하는지 직접적인

관찰을 통해 얻어지는 혁신

• 기술적으로 구현할 수 있고 고객가치와 시장기회로

전환 가능한 비즈니즈 전략을 사람들의 니즈와 맞추

기 위해 디자이너의 감성과 방법론을 활용하는 분야'

• 린(lean) – 디자인사고 기반 프로토타이핑

• 애자일(agile) - 즉각적인 사용자 반응의 적용

IDEO의 접근 방식: 디자인적 사고 (Design Thinking)< http://www.ideo.com>


http://www.ideo.com/

나는 진짜 문제를 찾겠다고 이야기한다. 사람들이 가져오는

문제는 ‘증상’에 불과한데 그런 증상이 나타나는 근본 원인

을 찾아서 진짜 원인을 해결해야 한다. (도날드 노먼@hci 2014)


Objectives

+ Collective Insight

“다른 팀의 UX design 이야기 듣기”스타트업들 간의 상호검증의 과정을 거치게 됩니다. 이를 통해 집단지성에 의

한 시너지를 발생시켜 앱서비스의 UX에 대한 다각적인 평가와 검증, 그리고 혁

신적인 UX인사이트를 얻을 수 있습니다. 향후 전문적인 UX 개발 프로세스 적용

시 UX 전문 인력과 원활히 커뮤니케이션할 수 있게 하고, 자사 제품/서비스에

대한 UX 방향성을 확고히 할 수 있습니다.


수많은 기억(先경험)의 파편들을

하나의 내러티브(後경험) 안에

재구성(Reorganization)

하는 것(또는 과정)

+ Narrative UX

Objectives




Objectives

+ Narrative UX

사용자에게 제공될 UX의미의 본질을 찾고,

UX 니즈를 해결할 시공간적 상황을 재구성해가는 것.

단순한 스토리의 표면뿐만 아니라 사용자에게 제공될 UX의미의 본질을 찾고,

UX 니즈를 해결할 시공간적 상황을 재구성해가는 것.

내러티브는 사용자와 제품/서비스 간의 어떤 특정 관점(point of view)을 바탕으로

한 순차적인 사건(event) 사이의 관계를 통하여 목표하는 UX의정체성(identity)을

형성하는경험과정의 일부이다.

내러티브 UX는 제품서비스에 대한 사용자의 의도(intention), 신념(beliefs), 가치

(value), 감성(emotion)의 이해와 그 행위(action)에 초점을 둔다.


사용자경험(UX)의 이해

Overview

개인적인 특정 기억을 남기거나(memory), 또 새로운 문화를 형성하게 되는지(culture)?

어떠한 기능이 User의 사용환경(Usability)에영향을 주는가?

사용자의 감각을 통해서얼마나 양질의 감성적(직관) 또는본능적 만족을 전달하는가?

Meaning of UX

Work Well Look & FeelBehavioral UX사용(기능)에 관한 행위와 반응 UX

Narrative UX제품/서비스 의미, 메시지, 사회문화적 UX

Visceral UX본능적 감각/감정에 따른 직관적 UX

U.camp

Part-1.

UX Actually

사용자(고객)를정확이이해한다.

비즈니스 목표와 범위 내에서 사용자(고객)의 환경과 현상, 그리고 그들이 처한

문제점에 대한 진단 및 해결 방향을 설정하는 과정을 통해 사업아이템 이면에 숨

겨진 사용자 경험가치의 본질 찾아 가는 것이 목적입니다.

Understanding

User exactly!

Definition

• 목표 사용자(고객)에 대한 당신의 관점은 무엇인가?

• 그들의 어떤 시간(라이프스타일)을 빼았고 싶은가??Key Question

Tip. 특정 제품/서비스를 사용하는 사용자 층의 행동, 라이프스타일, 성향 등의 조사를 통해 해당 제품/서비스에 투영되는 소비자들의 니즈를 발견하고, 목표 사용자 층에 대한 특징을 파악할 수있다. 이는 향후 제품/서비스 전략 및 디자인개발 전략에 중요한 정보를 제공한다.

UX 진단 및 killer-UX concept 도출


Part-1.

UX ActuallyUX 진단 및 killer-UX concept 도출

U.camp

• 사용자는 이 앱을 통해 어떤 욕구를 해결할 수 있는가?

제품/서비스 이면에 숨겨진 사용자 니즈의 본질 찾기!

사용자가 무엇을 원하고 필요로 하는지,UX 시나리오를 구체화하여, 궁극적으로 제

품/서비스 사업아이템이 근본적으로 해결해야 할 사용자니즈의 본질을 찾는다.

Insight

Finding

User Needs, Not a function

?Key Question


Part-1.

UX Actually

U.camp

사업아이템의사용자경험(UX) 핵심컨셉을정의한다.

기술적으로 구현할 수 있고 고객가치와 시장기회로 전환 가능한 비즈니즈 전략

을 사람들의 니즈와 맞추기 위한 핵심 UX value를 정의한다.

Describing

Killer-UX concept on your business!

?Key Question

• 사용자가 이 앱을 사용하는 하는 단 한가지 이유는?

• 당신의 사업아이템에서 추구하는 UX 성과는?

Insight



경영학적인 측면에서의 UX 관점

Meaningful UX

제품과 서비스 대상의 UX문제가 아니라, 통합적인 관점에

서 비즈니스 전체를 바라보는 것,

즉 사용자(소비자)가 만나게 될 기업(스타트업) 전체의 BI,

마케팅, 조직문화, 제품서비스 품질 등의 총체적 경험창출

을 고려한 UX 전략이 중요.


Meaningful UX?Part-1.

UX Actually

U.camp



Part-1.

UX Actually

U.camp

사용자 입장에서 UX key-concept 작성하고 감동시키기!

• Who you are (User) 나는 어떤 사람인데…

• What you do (Goal) 뭘 하려고 하는데…

• Where/When it takes place (Context of Use) 언제, 어디서…

• Why you do it (Desire/Motivation) 왜 이걸 쓰냐면…

• How you reach to the goal (Flow) 이렇게 사용하면 되는데…

• What you get from the activity (Benefit) 그래서 이게 너무 좋아…

Practice(1)

User scenario

100sec SpeechUX 진단 및 killer-UX concept 도출


100sec SpeechUX Scenario

사용자 입장에서 UX key-concept 작성하고 이야기 하기!

User scenario

100초 내에 사용자의 입장에 서서 UX key-concept 발표하기.

1. (User identity) 어떤 사용자인지?

2. (Needs/Problem) 사용하는 가장 큰 이유는?

3. (Context of Use) 어떤 상황에서 사용하는지?

4. (Function) 어떤 기능 때문에 사용하는지?

5. (User Task Flow) 그 기능을 어떻게 사용하는지?

6. (Benefit/Value) 그래서 어떤 의미가 있는지?

Keyword+ 짧은 문장

Practice

• Think User/Customer



“사용자 내면에 근본적으로 원하는 게 무엇인지 깨닿기!”

• 인간의동기이론_ 인간의 동기이론은 인간의 행동은 욕구에 의해 동기유발된다는 전제하

에, 인간의 기본욕구는 무엇이며, 그것은 어떠한 과정을 거쳐 동기를 불러일으키게 되는지에

관심을 둔다.

• Human Needs의재해석_Maslow. A의 인간 욕구 구분을 기초로 [Alderfer의 ERG이론]과

[McClelland의 성취동기이론]을 오늘날 사용자 라이프스타일 흐름을 반영하고, 디지털-모바

일앱 서비스의 제 반 특성을 고려하여 재해석하였다. 궁극적으로 사용자 경험을 통한 User

value Keyword 중심의 인간 욕구를 모바일앱 서비스가 충족시키고자 함이다.

제품/서비스의 어떤 요소들이 사용자에게 어떤 유형의 동기로 작용하여 사용자에

게서 특정 행동을 이끌어내는지를 파악합니다.

Part-1.

UX Actually

Insight

Realized

Fundamental

Human Needs


• Think User/Customer

UX Needs (What I Want)(needs/problem/pain)

User Context

Time(언제)

이동 중에 _나를 추적하는 위치정보로 부터 보호 받고 싶다.

Place(어디서) 자동차 안에서 _나만이 알 수 있는 자신만의 접속 방법이 필요하다.

Occasion(상황) 모바일결제 중

_나의 접속 경로는 숨기되 원하는 정보만를 얻고 싶다.

_나의 개인정보를 타인과 안전하게 공유하고 싶다.

WIW Table

WIW table: UX key-Function finding

앱서비스에서 해결해야 할 핵심 사용자 니즈 정의하기

Insight WIW : What I really Want to, 인간동기 욕구에 부합하는 도구적 니즈 ‘타깃 유저가 진정 원하는 니즈는 무엇인가?’

Fundamental Human Needs

Security 안전, 보안, 프라이버시


Killer-UX FunctionUX Needs

S

Ex) Kids mobile App.

UX Needs Issues

Integrated Function

Biz. Strategy

Technology Issues

미취학 아동 타켓

크리스마스 선물로 사주기에부담없는 가격

놀이와 학습을 동시에 제공

…

고급기능을 제거하고 관심 있어 하는 기능, 스타일 요구

자가 학습기능 필요

…

블루투스 기능 적용

타 게임기와 호환

크라우드 서비스 기술

…

부모와 직접적이고 간단한 커뮤니케이션 필요

원터치 방식의 직접 대화기능

단순한 인터페이스, 케릭터를이용한 인터페이스

현재 위치를 실시간으로 파악, 제한법위를 벗어나면 자동호출

선호 게임기의 에뮬레이터가탑재된 인터랙티브 학습용 APP

…

가중치(1~3)

…

평가(1~5)

◀UX concept

가중치(3) x 평가(5)

2

4

8

15

6

UX concept finding

Practice

• Think User/CustomerUser Needs- Biz. 전략 – UX 성과 달성을 위한 핵심기능 우선순위 정하기

User Needs 관점에서 발굴된 아이디어와 Seeds(Technology) 관점에서 발굴된 아이디어를 결합(integrated)하여 UX concept을 도출한다.

UX concept: 거창한 ‘기능명세’ 를 만들어 내는 것이 아니라, 비즈니스 성과를 달성하기 위한 핵심컨셉을 찾는 것이 목표.

Persona

Part-1.

UX Actually UX concept planning

U.camp

UX 구체화하기 위한 UX개발 헌장(charter) 작성하기!

UX Concept

핵심 UX컨셉

Killer-UX FunctionCore UX-Value

사용자(고객)의 UX 가치 제품/서비스

주요 기능

Target User

목표사용자

UX Needs

Target Market

목표 시장

사용자 니즈

Identity

제품/서비스

아이덴티티

Core Tech.Brand Concept

브랜드 컨셉 제품/서비스

구현 기술, 리소스


Practice(1)


Practice UX concept: 거창한 ‘기능명세’ 를 만들어 내는 것이 아니라, 비즈니스 성과를 달성하기 위한 핵심컨셉을 찾는 것이 목표.

5min. datingBreak

Part-2.

UI Storyboard

U.camp

UI Storyboard 란,

UX key-concept 구현에 수반되는 사용자

태스크와 UI feature 간의 상호작용을시각화하여, 개발자/디자이너와의

의사소통을 돕는 도구이자,

완성해야 할 앱서비스와 예상되는

사용자경험 미리보기!

Define

앱서비스의 기능과 사용자 간상호작용 미리보기


Part-2.

UI Storyboard

U.camp

• 앱 설계에 필요한 조각들을 모아서 순서대로 놓고, 배치해보고, 쌓아서 조립하는 과정

• 실제 계발 단계에서 발생할 수 있는 문제점을 미리 발견하고 대처하기 위한 과정

앱 서비스에 필요한

기능 조각들 간의 관계 설계

Insight


>

Killer-UX

Concept

GUIMood board

(1) 기능

(3) 관계 (4) 구조

(5) 설계

(6) 연결(7) 검증

>

(2) 순서

UIStory board


Part-2.

UI Storyboard

U.camp

UI Storyboard 작성


Practice

• 사용자 시나리오를 시각화하면서 평가하는 과정을 거친다.

• 사용자 Task에 따른 세부적인 기능들 간의 흐름과 관계망을 파악할 수 있다.

• 개발자와 사용자 간의 피드백을 받으면 스토리보드를 재정비할 수 있다.

Feature List

Task Flow

Process Diagra

mIA

Wire-frame

Work-flow

Feature list: Killer-UX concept/UX Needs의 구현에 필요한 기능 리스트

User Task-flow: 해당 기능수행과 사용자의 행위 매핑 및 흐름도

Information Architecture(IA): 정보의 구조화와 위계관계망(우선순위)

Key-screen: 해당기능 구현을 위한 인터페이스 요소와 메인화면

Workflow: key-screen 내 상작용 및 key-screen 간 전개과정


Part-2.

UI Storyboard

U.camp

UI Feature ListKiller-UX Function에 수반되는 앱시스템, 서비스, 장치 등인터페이스 Feature 목록 나열하기

(1) 필수적이고 가장 먼저 구현되어야 하는 기능

기능

“기능조각모으기”

방법

- 사용자의 니즈를 충족시키기 위한 앱의 기능들을 나열한다.

- 우선순위 설정 방법에 따라 기술된 기능의 우선순위를 정한다.

- 기능간의 포함관계를 고려하여 삭제 및 추가한다.

- 정의된 기능들에 대해 우선순위를 설정한다.

개발에 필요한 기능들을 추출하고 우선순위 정의

Feature List

Task Flow

Process Diagram

IAWire-frame

Work-flow



Part-2.

UI StoryboardUX design & producing Workshop Program for STARTUP Teams.

U.camp

User Task Flow

Feature List

Task Flow

Process Diagram

IAWire-frame

Work-flow

영화정보 보기예매정보페이지

예매모드 진입

사용자 인증실시간 결제예매 알람 등록

영화 정보 검색 영화 정보 검색

예매

예매

결제

리뷰

평점

예시

기능수행을 위한 사용자의 행위 순서(흐름)로 나열하기


Part-2.


U.camp

Information Architecture

Feature List

Task Flow

Process Diagram

IAWire-frame

Work-flow

예시

리뷰하기 예매내역보기

Main Page

작성 확인

영화 감상평 보기

영화 감상평 쓰기

감상평 작성

설정

영화 예매 알람

소리 설정

내용 설정

영화검색

달력으로 찾기

영화 선택

상영관 선택

날짜 선택

수정하기

삭제하기

영화 감상평 쓰기

찜한 영화 목록

기능들을 정보의 위계와 관계망으로 구조화하기


Part-2.


U.camp

Key Screen(wireframe)해당기능 구현을 위한 인터페이스와 메인화면 그려보기

“실제화면에기능적용하기”

각 기능의 구조와 특성을 반영하여 실제 화면에 그려넣기

방법

- 앞서 정의되었던 중요도, 관계, 위계 질서에 따라 UI 단위의 상대적인 크기나 위치를 결정한다.

- 전체 큰 레이아웃에서 하위 단계로 내려오며 디자인 한다. (Pattern → Component)

- 이후 검색창과 버튼, 검색결과 목록, 관계 정보와 같은 세부 UI element를 정의한다.

- 마지막으로, 현재 화면에서 빠진 기능이나 UI 요소는 없는지 확인해본다.

Feature List

Task Flow

Process Diagram

IAWire-frame

Work-flow

영화제목 ________________

별점

줄거리 ___________________________

주인공 ______________________

영화제목 ________________

별점

줄거리 ___________________________

주인공 ______________________

영화제목 ________________

별점

줄거리 ___________________________

주인공 ______________________

뒤로 Search


Part-2.


U.camp

Workflow화면전환 및 key-screen 간 상호작용 및 시뮬레이션 해보기

“기능별로연결된화면검증해보기”연속된 화면을 살펴보면서 앱 사용절차 검증

방법

- 정의된 화면 별로 각 버튼이나 컴포넌트의 동작에 의해 필요한 추가 화면을 연결한다.

- 순서에 맞게 배열된 화면 단위로 시뮬레이션을 해보면서 앱 사용절차를 검증한다.

Feature List

Task Flow

Process Diagram

IAWire-frame

Work-flow

영화제목 ________________

별점

줄거리 ___________________________

주인공 ______________________

영화제목 ________________

별점

줄거리 ___________________________

주인공 ______________________

영화제목 ________________

별점

줄거리 ___________________________

주인공 ______________________

뒤로 Search

영화제목 ________________

별점

줄거리 ____________________________________________________

____________________________________________________________

____________________________________________________________

_________________________________________________________

_________________________________________________________

_________________________________________________________

_________________________________________________________

_________________________________________________________

_________________________________________________________

_________________________________________________________

주인공 ______________________

뒤로 Favorite


Part-2.

UI Storyboard

U.camp


5min. datingBreak

Part-3.

GUI MoodboardUX design & producing Workshop Program for STARTUP Teams.

UXTriggertm

GUI Moodboard 란,

UX Concept이 반영된 앱서비스

화면의 직관적인 UX - Look & Feel,

앱서비스 Brand Identity를 일관되게 반영한

Tone & Manner로 최적의

디자인컨셉을 도출하는 과정

완성해야 할 앱서비스의 비주얼 컨셉과 시각적

사용자경험 미리보기!

Define


Part-3.


UXTriggertm

GUI Moodboard 목적

Define

• 수십만 개의 앱이 등록된 시장에서 차별화를 위해 개성있는 디자인은 필수이다.

• 앱의 핵심 기능이 드러나고 본래의 목적에 따른 사용에 도움이 되어야 하며

• 참신함과 전략적인 요구를 담아낼 수 있어야 한다.

바로 보고 쉽게 이해하고 아름다움을 느끼고 기억하게 한다.

시각적계층구조

가독성

미적인상 개성

직관적 사용성 비주얼 네러티브+


TIP

Part-3.


UXTriggertm

모양 Shape매우 기본적인 요소이기 때문에 그 자체보다는 서체와 같이 여러가지 복합적인 형태로 사용됨.

기기별 디스플레이 사이즈와 해상도가 다른 안드로이드의 경우 이미지 크기에 대한 문제를 나인패치와 dp개념으로 보완한다.

크기 Size정보의 중요도 및 우선순위, 시인성 또는 가독성, 버튼 터치 오류 등을 좌우.

시력이좋지않은노인이나터치정확도가떨어지는유아를대상으로하는앱의경우버튼사이즈를보통보다크게디자인.

공간 Space2D 두께나 깊이가 없는 플랫한 형태ex)픽토그램

3D 앞, 옆, 위(아래)등이 3면이 고루 묘사되어있으며그림자, 반사 등을 통해 공간이 표현됨.

2.5D 약간의 두께와 깊이를 주어 볼록한 느낌이 있으나 플랫한 공간 위에 배치됨.ex) ios6 아이콘

형태 Form다양한 속성을 나타낼 수 있음. 직선/곡선, 정형/비정형,외곽선의 두께, 모서리 라운딩등

다양한 해상도를 고려하라


Insight

TIP

Part-3.


UXTriggertm

레이아웃 Layout시각적 구성 요소들에 대한 화면 상의 전반적인 배열.정보를 어떻게 보여줄 것인가?

정보의 양이나 분류등은 정보설계 Information Architecture와 UI 화면설계UI Wireframe 및 워크플로우Work flow 단계에서 상당부분 정리 되지만 GUI 컨셉이나 가독성 등에 따라 변경될 여지가 있다. UI설계자, 개발자와 긴밀히 협업하여 보완해 나가야 한다.

분량Amount and Density얼마나 많은 양의 정보를 한 화면에 보여줄것인가가 레이아웃에 있어서 가장 근본적인디자인요소.가장 일반적인 법칙은 꼭 보여 주어야 하는정보만 제공하는 것.

분류 Grouping정보의 범주를 시각적으로 어떻게 나누어줄 것인가?공백과 색, 윤곽선과 같은 시각적 경계 이용

정렬 Alignment정보의 그룹들을 어떤 순서에 따라 화면에배치할 것인가?정보의 사용 순서 : 먼저 사용하는 정보를좌측 상단, 나중에 사용하는 정보를 우측하단에 제공.정보의 일반적인 순서, 중요도, 사용 빈도 등..

공간적관계Spatial Relation일반적으로 관련된 자료는 수평보다 수직으로 배열하는 것이 더 좋다.문자정보는 좌측정렬, 숫자정보는 우측정렬권장. 파일 구조와 같은 계층적 관계는 들여쓰기.

정보의 구성은 긴밀한 협업을 통해 보완하라


Insight

TIP

Part-3.


UXTriggertm

타이포그라피Typography

플랫,메트로 UI 디자인에서 타이포그라피의 비중이 훨씬 커지게 되었다. 웹이나 모바일 디스플레이에서는 산세리프체의 가독성이 더 좋다. iOS기본서체 Helvetica와 Android기본서체인 Roboto도산세리프체이다.

서체 Typeface폰트Font라고 불리우는 글자의 형태산세리프San-serif : Arial, Helvetica, 고딕계열세리프Serif : Time, Garamond, 명조계열

HelveticaArial

Time New Roman

GaramondBradley Hand

돋움체나눔고딕나눔명조바탕체궁서체

기능적역할: 의미 전달, 가독성과 정보전달 강조형태적역할: 조형미 표현

크기 Size주로 Point 단위로 나타내며, 같은 크기라도서체에 따라 다를 수 있다.

굵기 WeightThin, Light, Regular, Medium, Bold, Black etc.

스타일 StyleItalic, Condensed, Expended

행간 Line Space문장과 문장의 사이 간격

자간 Letter Space글자와 글자 간격

산세리프의 가독성이 좋다.


Insight

Part-3.


UXTriggertm

그래픽Graphic

비문자적인 형태의 복합 디자인 요소

TIP

아이콘의 경우 모바일 디스플레이 환경에 매우 유용하다. 심미적 표현 여지가 많고 디자인 컨셉표현에 중요한 포인트이기 때문에 간혹 남용하는 경우가 있다. 지나친 생략으로 인해 사용자의혼란을 야기할 수 있기 때문에 사용성에 입각하여 사용 여부를 고민해야 한다.

이미지 Image실제 세상이나 상상 속의 세상을 그대로 표현하기 위한 수단사진, 일러스트레이션

다이어그램 Diagram복잡한 시스템을 추상화하여 상징적으로 표현추상화 정도가 높을수록 전반적인 내용, 추상화 정도가 낮을 수록 구체적인 내용 설명

아이콘 Icon조작부의 기능을 표현. 이미지나 다이어그램은 시스템을 표현, 아이콘은 시스템 표현과 동시에 사용자로 하여금 기능 조작 유도추상화 정도 : 가능한 단순한 아이콘 형태 제공, 메타포 : 조작방법보다 조작하는 대상을표현하는 것이 효과적,텍스트와 함께 제공 : 사용오류 낮아짐.

테이블과그래프Table and Graph수치 표현에 효과적테이블 : 가로축과 세로축을 통해 격자형으로 표현하는 방식정확한 연산이 필요한 경우. 특정 자료를찾는 경우 적합.그래프 : 꺾은 선 그래프나 막대 그래프 등 다양한 그래픽 요소를 통해 표현작업 진행 방향. 추세분석. 미래예측 표현.


그래픽요소의 남용을 피하라.

Insight

Part-3.


UXTriggertm

인지적효과

시각적계층구조화면 구성 요소의 위치와 구성 요소 간의 관계를 단계적으로 인지하도록 설계. 사용자의 시선을 유도하여 원하는 정보를 빨리 찾고 이해하도록 함.

미적인상디지털컨텐츠가 사용자들에게 제공하려는핵심가치에 따라서 그에 맞는 감성을 제공하는 것이 중요. 시스템을 사용하기 전에 느끼는 첫인상이나 시스템을 사용하고 나서사용자가 풍부한 감성을 받을 수 있는 지의여부가 제품의 선택에 매우 중요한 기준이됨.앱에서 풍기는 분위기라고 볼 수 있다. 미적인상이 정해지면 GUI디자인 요소의 활용 기준이 정해진다. 앱의 성격이나 목적, 사용자의 성별, 연령 등을 고려하여 정하도록 한다. 가독성

얼마나 효율적을 정보를 읽을 수 있는지를의미. 거의 모든 시각요소들이 가독성에 영향을 미침.특별한 이유로 가독성을 낮추려는 의도가아니라면 가독성에 대한 규칙은 철저하게지켜주는 것이 좋다. 특히 주사용자가 노인일 경우 폰트의 크기가 중요하다. 또한 텍스트 컨텐츠가 비중이 큰 e-book 같은 경우 가독성과 함께 눈의 피로를 최소화 시킬 수 있게 디자인해야 한다.

브랜드아이덴티티독특성과 지속성을 지님. 다른 제품과 구별되며 오랜시간 동안 지속됨. 한번 구축된 BI는 경쟁사들이 모방하기 어려움.

감성적효과


GUI 디자인 효과

Insight

• 수십만 개의 앱이 등록된 시장에서 차별화를 위해 개성있는 디자인은 필수이다.

• 앱의 핵심 기능이 드러나고 본래의 목적에 따른 사용에 도움이 되어야 하며

• 참신함과 전략적인 요구를 담아낼 수 있어야 한다.

바로 보고 쉽게 이해하고 아름다움을 느끼고 기억하게 한다.

Part-3.


UXTriggertm

앱 UI/GUI 디자인 원칙개성있는

앱디자인 사례

기본적인 디자인 원칙을 토대로 앱의 성격에 맞으면서사용자에게 감성적으로 어필 할 수 있는 포인트를 찾아본다.

시각적계층구조

가독성

미적인상 개성


개성있는 디자인

Insight

Part-3.


UXTriggertm

Step 1. 머리 속에 흩어져있는아이디어의조각을모아각자하나씩 Moodboard를 완성한다.

Step 2. 팀원들과의 토의를 통해각자의 Moodboard를하나의컨셉으로재구성한다.

Step 3. 다양한가설에따라여러가지컨셉이 나올 수 있다.

Step 4. 최대한빠르게앱에적용해보고 결과에 따라디자인을발전시킨다.


GUI MoodboardPractice


[워크숍]앱센터와 라임페이퍼가 함께하는

스타트업을 위한 UX디자인 실전 워크숍

Documents

U cmap 워크숍 강의코칭자료집 종합-v1.0(ucamp1기)