액션과 효과의 메카니즘 : 훌륭한 피드백 루프 디자인하기

  (>link)

# Product의 기본 피드백 루프를 발견


사용자에게 빠르고 의미있으며, 수치화되고, 맥락적으로 피드백 루프를 만드는 것에
지금보다 더 좋은 사용자의 몰입이나 경험을 줄 수 있음

향상시켜야 하는 목록을 가지고 가장 중요하고 공통적인 것이 무엇인지를 확인
아래 제시된 것들 중 한 가지로 향상시키면 됨.


1. 속도 (Speed)
가능한 빠른 효과를 보여줌으로써 피드백 루프를 단단히 조이는 것입니다.

2. 측정가능성 (Measurability)
framing effect -질문이나 문제를 제시하는 방법에 따라 사람들의 판단이나 선택이 달라지는 현상
anchoring effect - 초기에 제시된 기준에 영향을 받아 판단을 내리는 현상, 초기에 제시되는 기준점을 잘 활용

3. 맥락 (Context)
더 큰 목표의 맥락을 제시한 피드백을 제공, 문제를 좀 더 생각할 수 있는 실질적인 틀을 만듦

4. 동기에 연결 (Connection to motivations)
사용자가 관심있을만한 것을 발견하고, 그 목표에 도달할 수 있는 가능성을 제공하고, 그것과 연결된 피드백을 제공


# 요약

1. 성공을 측정할 수 있어야 한다.

피드백 루프를 개선했다면 실제 향상이 되었는지, 변화가 일어났는지를 확인하는 것인데,
분석과 사용자 리서치를 통해 변화의 결과를 측정하는 것이 매우 중요


2. 윤리적이어야 한다.

윤리적이어야 한다는 것은 사용자의 행동에 영향을 주는 피드백 루프를 만드는데 있어 .책임감이 필요하며 강한 도덕적 잣대가 필요
몰입과 중독은 유사함

Good Idea

- 칼 퇴근’ 도와주는 마법 책상 (>link)

- 창의성 넘치는 천재적인 광고 10 (>link)

- 리프트웨어 (Liftware) (>link)
  파킨슨병 등에 의한 손떨림으로 불편을 겪고 있는 환자들을 위한 숟가락
  구글의 인수는 의료와 생명공학 분야로의 진출을 넓히기 위한 목적으로 풀이

- BAND 소액송금 기능 도입 (>link) + N빵 계산기

- 카카오톡, 택시 예약 호출 서비스 진출 (>link)

PF

- 실제 수행 사례

  문제 >  UX 디자인 접근 > 해결

- 문제 해결 과정 초반

  반드시 자신이 알아낸 사용자의 문제점, 니즈와 같은 경험들이 드러나야 함
  (문제가 더 구체적, 예상밖이여야 함)

  사용자 컨텍스트와 니즈, 동기, 태도, 이용행태 설명
  문제를 파악하고 정의

- 문제 해결의 중반

  사용자 문제점/니즈를 이런 절차를 통해 해결

  그게 반드시 Persona나 Journey Map일 필요는 없음
  여러가지 문제에서 패턴, 유형을 발견하는 Bottom-up 기반의 논리적인 전개여야 함
  (이런 과정없이 단순히 문제 하나 하나에 집중하면 안됨)

  > 프로토타이핑 과정
  여러가지 시도들이 있고, 어떤 근거에 의해 하나의 완성된 안으로 좁혀져 나가는 과정
  (서비스/콘텐츠/정보디자인/프로세스 등 필요)

- 최종 디자인 결과

  처음의 의도했던 목표와 부합하면서도 자신만의 차별화된 특징과 장점을 갖고 있어야 합니다.
  (결과가 형편없다면 그 사람은 지식은 있으되 실력은 없는 사람일 수 있습니다.)

pf 참고 http://softfacade.com/work/campusquad/

모션 레퍼런스
http://story.pxd.co.kr/657
http://line25.com/articles/creative-uses-animated-gifs-present-ui-designs
http://webstoryboy.tistory.com/1457


액션과 효과의 메카니즘 : 훌륭한 피드백 루프 디자인하기
http://uxd.so/h/%EC%95%A1%EC%85%98%EA%B3%BC-%ED%9A%A8%EA%B3%BC%EC%9D%98-%EB%A9%94%EC%B9%B4%EB%8B%88%EC%A6%98-%ED%9B%8C%EB%A5%AD%ED%95%9C-%ED%94%BC%EB%93%9C%EB%B0%B1-%EB%A3%A8%ED%94%84-%EB%94%94%EC%9E%90%EC%9D%B8/

The Illusion of Life : Disney Animation

 >link

 >link 

>link

 The Illusion of Life의 12가지 기본 원칙

1. Squash and stretch (짓눌림 & 찌그러짐 & 늘어짐)

사물 고유의 중량과 물건이 움직일 때의 강도를 표시함

제공하는 서비스의 모바일 경험이 단단한 면,  날카롭고 정확한 움직임인지,

유기체적인 부드러움을 가진 우아한 움직임인지? 

(예. 물풍선 잡은 상태, 책장 넘기는 효과)

2. Anticipation (예측)

앞으로 어떤 일이 일어날지 관찰자에게 단서(인사이트)를 제공함

객체가 움질 수 있는 속도, 방향, 객체의 제스처 가능성에 대한 단서를 제공

행위의 준비 > 행위 그 자체 > 움직임의 결과 

(예. 볼링 자세, 촬영 준비시 조리개 ani, Lock screen LCD on 효과)

3. Staging (준비)

인터랙션 시 (사용자가 추가로 해석하지 않도록) 구조를 명확하게 보여주어야 함

현재 보여지는 파일이 전체 구조에서 어떤 위치에 있는지 명확하게 표시 

(예. 캐릭터의 프로필보다 입체적인 view, 키노트 페이지 전환 효과)

4. Straight ahead and pose-to-pose (곧장 앞으로 & 포즈에서 포즈로)

애니메이션 드로잉 과정
Straight ahead - 특별한 움직임, 역동적 행위 포착

pose-to-pose - 핵심 프레임 (사이를 연결해주는 프레임)
(예. 걷는 이미지 연속사진 & Key 프레임 표시)

5. Follow through and overlapping action (따라오기 & 겹치기 액션)

행위의 단계적 마무리 표현

객체의 일부가 객체의 다른 부분이 멈춘 후에도 지속적으로 움직이는 것을 포착
객체들의 시점과 속도의 미묘한 변화에 따른 움직임을 포착하여 좀 더 자연스럽게 보이도록 함
(예. 원도우 폰 타일 전환)

6. Slow in and out

관성의 법칙 표현법 (세상의 사물들은 가속화되었다가 속도가 감소되는데 시간이 필요)

사물의 시작과 끝의 움직임 근처에는 더 많은 프레임을 추가하고 중간은 더 적게 표현

(예. 수평선에서 공을 던질 때)

7. Arcs (호)

객체는 공간에서 임의대로 움직이는 것이 아니라
추진력, 바람 저항, 중력 같은 힘에 의해 영양을 받아 예측 가능한 동선(궤적)을 따라 움직임

(예. 식물, 사람, 동물 같은 유기체는 아치 모양을 그리듯 움직이고, 기계적 사물은 직선적 궤적으로 움직이는 경향)

8. Secondary action (보조 움직임)

보조적 움직임으로 (산만하지 않게 움직임의 연속선 상에서) 주 행위를 지원

주 행위를 풍부, 분위기를 강화, 강조시켜 줌
(예. 아이폰에서 사용자가 이메일 URL tap)

9. Timing (프레임 수)

무게, 사이즈, 규모와 같이 객체의 물리적 특성을 표현 (물리적 법칙을 준수해야 함)

캐릭터의 기분과 성향 같은 미묘한 감정적 상태를 전달
디자인에 인터페이스 요소의 움직임과 스피드를 통해 무엇을 전달할지 이해 필요
(예. 스트를 스크롤하는 속도나 스크린 간 전환 속도)

10. Exaggeration (과장)

움직임을 역동적이고, 생생하고 즐거움을 느끼도록 만드는 요소
디자인 요소가 어떻게 움직이는지 계산하고, 움직임을 강조하기 위해 형태, 범위, 요소를 혼합하여 수정 

(예. 아이패드 홈 > 어플리케이션 오프닝 시 트램펄린 전환)

11. Solid Drawing

시물과 캐릭터에 부피와 무게를 통해 적합한 차원을 구체적으로 보여줌

3차원 형태의 기본인 해부학적 구조, 무게, 균형, 빛과 그림자를 이해해야 함

12. Appeal (캐릭터의 매력)

 모션 적용 프로세스 

> 스케치 - 모션 스토리보드 
> 와이어프레이밍 - 문서에 표시
> 프로토타이핑 - 소프트웨어 프로토타입핑

 프로세스 중 핵심적인 활동 Tip

1. 제약 연습하기

과하게 적용하지 말아야 함. 모션을 전달하기 위해 치밀함과 섬세한 기교가 필요

2. 상호 보완 원리

가장 효과적인 애니메이션은 많은 원칙들이 함께 결합되어 적용됨. 애니메이션 스킬이 성장함에 따라 훌륭한 레시피처럼 이 원칙들을 아름답게 조합하는 방법을 배우게 됨.

3. 지원하는 역할로의 애니매이션

애니메이션은 모바일 경험의 보완제. 경험을 손상시키거나 혼동시키지 않는지 확인

 Real-Life Metaphor

실세계의 모습과 현상, 사물의 형태나 상황을 다른 매체에 그대로 재현하는 방식

(스큐어모피즘 : 도구의 물질적인 형태, 형식을 모방)

UX 디자이너가 UI설계시 알아두면 좋을 모션상식 (>링크)  

The Illusion of Life : Disney Animation
모션과 애니메이션 : 새로운 모바일 UX 디자인 소재 (전반부) (>링크) 
Your next Google password might be ultrasonic (>링크1) (>링크2)  

제스처 모델의 차이점과 일원화 문제 (>링크) 

Project Tango  (>링크)

음파 인증이란 인터넷 뱅킹 등 주요 웹사이트에 로그인 할 때

기계만 들을 수 있는 고주파로 본인을 인증하는 방법

   

[출처] 이스라엘 음파 인증기술 보유 스타트업 '슬릭로그인(SlickLogin)' 구글에 인수|작성자 KOISRA

슬릭로그인 앱을 설치한 스마트폰을 컴퓨터에 갖다대면

컴퓨터는 스마트폰을 감지하고,

스피커로 사람은 듣지 못하는 고주파를 발생합니다.

스마트폰 앱은 이를 분석한 후 본인임을 컴퓨터에 알리면

웹 서버가 로그인을 승인합니다.

Google에 인수됨  

http://www.youtube.com/watch?v=Qe10ExwzCqk


UX 전문가 식별 방법 (>링크) 

http://uxd.team.handstudio.net/post
http://uxd.so/h/

완벽한 페르소나 만들기 / 원제: Perfecting your personas

http://www.cooper.com/journal/2001/08/perfecting_your_personas.html

페르소나는 제품, 서비스등의 기능,방향,인터렉션,디자인 등을 결정할 때 가이드가 되는 대표적인 사용자 유형을 정의하는 것을 말한다. 소개하는 아티클에서는 우리가 페르소나를 만들 때 반드시 참고해야할 몇가지 사항에 대해서 말하고 있다.
위 링크로 직접 일독하기를 권한다.
* Personas represent behavior patterns, not job descriptions

  페르소나는 사용자의 업무에 대한 작성이 아닌 사용 및 행동 패턴에 대한 대표성을 나타내야한다. 

* Keep your persona set small
  페르소나 그룹을 작게 유지하라 (페르소나에서 매직넘버는 없지만 페르소나 간의 차이점이 없을 정도로 많아지면 안된다.)
* Your marketing and sales targets may not be your design targets
   마케팅/영업 타겟과 디자인 타겟이 상이할 수 있다
* Add life to the personas, but remember they’re design tools first
   그들을 분명하기 위한 인적정보를 제공하되 그들이 디자인을 위한 툴임을 잊지 말것(가상의 인물의 삶을 그려넣는 과정이 재밋더라도 페르소나의 본질을 잊지 말것)
* Use the right goals
   각각의 Task 중심이 아닌 목표를 설정하라 (Life goal, Experience goal, End goal 등 3,4개의 페르소나 목표를 설정하여 이를 중심으로 디자인 할 것) 
* Personas must be specific to the design problem
   페르소나는 현재 프로젝트에 맞춘 사람이지 통용될 수 없다. (페르소나 재활용 금지)