착한문서만들기

비주얼씽킹과 인포그래픽으로

만들기

Version 1.0

착한문서

1999 2014 2002 2004 2007 2010 2013 2012 2009

이상용

UX DESIGN(사용자 경험 설계)

UI / GUI / IxD

착한 문서 만들기

착한문서 =

상대를 쉽게 이해시켜주는 것

착한문서 = 이해 + 설득 보기 쉬운 착한 문서

복잡하지 않은 간결한 문서 하나의 이야기가 있는 문서

비주얼 씽킹 공감 메타포

텍스트 < 비주얼 나의 이야기를 하자 complex vs simplify

머리속에 있는 컨셉을 끄집어내서 시각화하기

visual thinking


Me ≠ You

!


AGILE


STRATEGY FLOW IDEATION

전략 수립, 플로우, 브레인스토밍 등에 가장 빨리 적용 할 수 있는 방법


한번에 하나씩 그려보기

“인문학” 같이 설명하기 어려운건??



인문학

人


인문학


한번에 하나씩 꺼내기

간단하게 그려보기

나열해서 펼쳐보기

일상에서 찾기


쉽게 이해시켜주자

metaphor

Simplified Metaphor Real object

모두가 인지하고 공감하는 대표적인 요소에 대해 생각해보기


대표 아이텐티 찾기

좋아요

안경

레고


대표 아이텐티 찾기

좋아요

SNS 안경

파티 레고

취미


현재 OOOO에 가보시면 아시겠지만 가장 최신 게시글이2012년 5월에 작성 된 글입니다. 현재 사용자가 이용하지 않는 죽은 컨텐츠가 사이트…


X

죽은 컨텐츠

모두가 이해하기 쉽게 표현되는지 생각해보기


웹 접근성을 준수한 반응형 웹 월드 와이드 웹 (World Wide Web)을 창시한 팀 버너스 리(Tim Berners-Lee)는 웹이란 '장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간'이라고 정의하였으며, 웹 콘텐츠를 제 작할 때에는 장애에 구애됨이 없이 누구나 접근할 수 있도록 제작하여야 한다고 하였다. 이렇듯 웹 창시자가 웹의 기본적 철학에서 웹 접근성 부문을 강조함에도 불구하고, 웹 접근성을 바라보는 입장에 따라 다르게 정의하고 있다. 하지만, 접근에 대한 개념의 다양성으로 인한 인식의 부족보다는 접근성에 대한 개념을 잘못 이해하고 있는 것이 더 욱 문제이다. 즉, 접근성을 단지 장애인에게 국한된 문제라고 잘못 이해하고 있는 경우가 대부분이라는 것이다. 비록 접근성 준수가 장애인에게 가장 혜택이 많이 돌아가는 것은 사실이지만, 접근성이란 장애인뿐만 아니라 모든 사람이 정보통신 기기나 서비스를 손쉽게 활용할 수 있도록 만드는 것을 말하는 것이다. 예를 들자면 장애인과 노인들을 위해 개발된 리모콘, 전화, 자동문 등의 제품들이 널리 보급되면서 궁극적으로는 모든 사람들이 편리하게 활용하게 된 것을 들 수 있다. 이러한 접근성 개념은 정보통신 분야에서 다양한 제품 및 서비스 간의 호환성 문제, 이동 정보통신 기기 등으로 그 필요성 및 중요성이 더욱 증대되고 있다.



모두가 이해하기 쉽게 표현되는지 생각해보기

AS-IS TO-BE


메뉴 찾기도 어렵고 복잡해요


숨바꼭질 금지 탐정놀이 금지


눈높이에 맞춰 공감대를 만들자

empathy

共感 같은 것을 이야기하기 같은 언어로 소통하기

그들의 관점으로 바꿔 소통하기


모바일 게임 좋아하세요?

헤어졌어요 ㅠㅜ

연락처 좀 알려줘~ 주식부자가

증가하고 있습니다


3인칭이 아닌 1인칭 시점으로

좀 더 구체적으로

그들과 함께 생각을 읽고 그들과 같이 바라보는 관점을 가지면?


애니팡 좋아하세요?

비트윈 탈퇴했어요..

카톡 아이디가 뭐야?

벤츠와 BMW 판매량이 증가하고

있습니다

모바일 게임 좋아하세요? 헤어졌어요 ㅠㅜ

연락처 좀 알려줘 주식부자가 증가하고 있습니다.


SI 프로젝트는 뭐다?


떼거지로 모여서 밤새도록 코딩하는 것


스포츠는 뭐다?


< +

떼거지로 모여서 치맥하는 것


빠른차는?


핵심 내용만 추려 강조하자

simplified


정보 + 시각화 = 인포그래픽

빠른 정보 전달 및 이해

이쁜문서 ≠ 좋은문서




학습 ≠ 설득


> 100원의 스티커가 100만원의 장비 보다 많은 사람을 보호할 수 있습니다.


> 100원의 스티커가 100만원의 장비 보다 많은 사람을 보호할 수 있습니다.

: (

: )


출처: Good.is


출처: 충전인프라

무엇을 강조해야 되는지 생각하기



출처: 구글


세로로 ‘소화전’이라고 쓰고, 설명이 복잡한 현재 소화전(왼쪽). 가로 글씨로 ‘소화전’이라고 적고, 이해하기 쉽게 사용 설명을 그림문자로 표현한 개선안(가운데·오른쪽).

출처: 권영걸 서울대 디자인학부 교수


출처: 미정

5초 안에 이해시키기

visual > text

텍스트없이 이해시키기

00:05


이것은 눈의 굴절 이상을 보정하거나 눈을 보호하거나 몸을 치장하기 위한 기구이다. 이것은 금속 혹은 플라스틱으로 만든 프레임 안에 렌즈로 구성되어 있고 프레임이 2개의 렌즈를 감싸서 렌즈의 이탈을 방지하며 그 양 끝은 사람 귓 등에 걸치게 되도록 휘어져 있다. 그리고 이것을 안경이라 부른다.


안경 은 눈의 굴절 이상 을 보정하거나 눈을 보호하거나 몸을 치장하기위한 기구이다. 안경은 안경테, 안경알로 구성되어 있다. 안경테의 경우는 사람마다 기호에 따른 차이가 있을 뿐이고 안경알은 사람의 시력이나 눈의 이상 정도에 따라서 다르다. 안경은 안경테가 없는 …

VS 텍스트 비주얼



출처: 포스퀘어

경험을 이야기 하자

storytelling


We deliver Bundle

다음에 뭐가 나오는지 궁금하게 만들자

문제를 보여주고 대답을 알려주자


KNOWLEDGE


내가 가진 지식을 서로 이어서 이야기 하기


EXPERIENCE KNOWLEDGE


출처: 미정

1

Data = Thread

6

4

5

3

데이터 수집 데이터 분석 및 가공

스토리 도출

디자인

아이디어 스케치

편집

2

완성



출처http://instagram.com/sloday365


http://instagram.com/sloday365

내일 동대문디자인플라자(DDP)가 개관합니다. 총 건설비 4,226억 원이 들었는데, 이는 서울시 신청사와 세빛둥둥섬을 건설하고도 488억 원이 남는 규모입니다.

황사가 몰려오고 있습니다. 국내 시판되는 황사마스크의 성능을 측정해 보니 98.5%의 세균을 차단한다고 합니다. 반면에 일반 보건마스크는 88.0%의 세균밖에 차단하지 못합니다.

한국은 1년에 311,925톤의 참치를 원양에서 잡는 세계 3위의 참치 어획국입니다. 하지만 한국 참치기업들이 집어장치와 같은 파괴적인 방법을 사용하고 있어 참치가 멸종위기에 처했습니다

페이스북 빅데이터를 활용한 흥미로운 통계입니다. 사랑에 빠진 남녀의 평균 나이차이가 2.4세라고 합니다. 전체적으로는 남성이 나이가 많은 경우가 67%, 여성이 많은 경우가 20%, 나이가 같은 경우가 13%입니다.

서울 도시고속도로 중 강변북로 동작->반포 구간의 평일 교통량이 가장 많은데요, 하루 평균 148,000대가 지나간다고 합니다. 서울 서북부 지역과 일산·파주 등 시 외곽에서 강남으로 진입하는 차량이 많기 때문입니다.

UN의 세계 인구 전망 보고서에 따르면 현재 72억 명인 인구는 2050년에 96억 명으로 증가할 것입니다. 특히 인도가 중국을 제칠 것이며, 2050년까지 증가할 24억 명의 인구 중 53.7%는 아프리카인일 것입니다.

재미와 감동을 주는 해피엔딩


case study

케이스 스터디

클라우드 서비스 이용행태

타블렛 23%

모바일 57%

데스크탑 18%

기타 2%

케이스 스터디

Look sense interact

케이스 스터디

케이스 스터디

사용자들에게 위쇼앱을 지속해서 사용하게 만들기 위해 3가지 전략

포인트 적립 앱실행, 좋아요, 친구초대, 친구추가 등의 엑티비티를 통한 포인트 적립 및 포인트를 통한 모바일 기프트상품 할인 혜택.

혜택 모바일 커머스와 엔터테인먼와의 제휴를 통한 할인 혜택, 모바일 쿠폰 이벤트 참여 등의 서비스 혜택 제공

도전과제 앱실행, 좋아요, 친구초대, 친구추가 등의 특정 엑티비티 합산이 되면 특별 타이틀 획득 및 방문자 트래킹, 비밀 덧글 기능 등 기간제 부가 서비스 이용 권한 부여. 예) 친구에게 선물을 많이 사준 경우 “자선사업가” 도전과제 언락

케이스 스터디

Coffee break

머리속에 있는것을

끄집어내라

관점을

바꾸어 보자

일상에서

찾아라

5초안에

이해시켜라

내가 가진 경험을

이야기하라

최대한

간결하게 표현하라

UX DESIGN(사용자 경험 설계) UI / GUI

이상용

Feedback (*악플사절)

[email protected] / 010-9190-7792

meta4 design lab: Creative Director

이미지 및 레퍼런스 출처: 구글 이미지 thenounproject sloday meta4.design lab foursquare

권영걸 서울대 디자인학부 교수 충전인프라 정보시스템 facebook good.is joonmeedia

Design

착한문서만들기