Part 1에 이어 번역해봤습니다.


6. 집중


  • 유저가 몰입할 수 있는 UI를 디자인하기 위한 핵심은 바로 "집중"이라는 결론을 내렸다. 앞으로 이에 관련된 글을 더 올릴 예정이다. 유저의 관심을 끌고 유지하는 것, 유저가 뭔가에 집중하고 있을 때 방해하지 않는 것이 핵심이다.
  • 사람들은 달라보이고 새로운 것에 관심이 쏠리도록 몸에 베어있다. 만약 무언가를 달라보이게 만들었다면 유저는 그것을 도드라지게 볼 것이다.
  • 하지만 한편으로 사람들은 시각적으로 변화를 알아차리지 못할 때도 있다. 이를 변화맹(change blindness)이라고 한다. 재미있는 동영상이 하나 있는데 거리를 지나는 행인에게 누군가 멈춰서게 하고 길을 묻는다. 이때 행인은 바로 앞에 있는 사람이 바뀌는 것을 알아차리지 못하는 것을 테스트한 영상이다. (이 예제보다 더 유명한 영상이 있어서 링크합니다. https://www.youtube.com/watch?v=0grANlx7y2E)
  • 주의를 끌기 위해서는 다양한 것을 활용할 수 있다. 밝은 색상, 큰 글씨, 비프음, 말소리 등은 사용자의 주의를 끌 수 있습니다.
  • 사람은 쉽게 산만해진다. 만약 사용자가 집중하길 원한다면 깜빡이거나 영상을 재생하지 말아라, 하지만 만약 그래도 사용자의 관심을 다른 데로 끌고 싶다면 오히려 반대로 그렇게 하면 된다.


7. 사람들은 정보를 갈구한다.


  • 도파민은 사람들을 갈구하게 만든다고 한다. 음식, 섹스, 정보 등등. 학습은 도파민으로부터 시작된다. 정보를 점점 더 원하게 된다.
  • 사람들은 종종 실제 필요한 정보보다 많은 것을 알고 싶어한다. 더 많은 정보를 갖고 있다고 느끼면 사람들은 더 많은 선택권이 있다고 느낀다. 더 많은 선택권은 더 자유롭다고 느끼며 그렇게 내가 컨트롤하는 속에서 느낀 자유로움은 스스로 더 나은 삶을 가져다준다.
  • 사람들은 피드백이 필요하다. 파일을 로드할 때 컴퓨터는 사용자에게 굳이 알려줄 필요가 없다. 하지만 사람은 지금 무엇이 진행되고 있는지 알고 싶어한다.


8. 인지하지 못하는 과정


  • 대부분의 멘탈 모델은 인지하지 못하는 사이에 작동한다.
  • 만약 작은 행동을 일단 할 수 있게 한다면 (무료 회원 가입같은) 자연스럽게 더 큰 행위도 쉽게 하도록 할 수 있다. (프리미엄 회원으로 업그레이드하는 것)
  • 뇌의 부분 중 구뇌(old brain)는 우리 행동 대부분의 입력을 통한 것들이다. 구뇌는 생존과 번식(음식, 섹스, 위험)을 관장한다. 왜 이 세가지가 우리의 관심을 잘 끄는지를 증명한다.
  • 감정뇌(emotional brain)는 그림에 크게 반응한다. 특히 사람들에 대한 그림, 동화 같은 것이 그렇다. 이 감정뇌는 우리의 결정에 큰 영향을 끼친다. 
  • 사람들의 행동은 알아차리지도 못하는 사이에 크게 영향을 받기도 한다. "피곤", "지치다"라는 단어를 들으면 젊은 사람이라도 걸음걸이가 느려진다. (이를 프레이밍(framing)효과라고 한다.)
  • 구뇌와 감정뇌 둘다 우리의 지식과는 무관하게 반응한다. 우리는 스스로 이성적이라고 생각한다. 물론 인지뇌가 결정을 하긴 하지만 그것이 실제로 행동으로 옮겨지는데 결정적인 역할을 하진 않으며 이성적인 결론이 때론 결론으로 이어지지도 않기도 한다.


9. 사람들은 멘탈 모델을 스스로 만들어간다.


  • 사람들은 모두 상황과 대상 또는 환경에 맞는 각각의 멘탈모델을 지닌다. (돈을 지불하거나 책을 읽거나 리모콘을 조작하는 등등)
  • 사람들이 저마다 갖고 있는 멘탈 모델마다 당신이 디자인한 UX design은 어렵게 느껴지기도하고 쉽게 느껴지기도 할 것이다.
  • 좋은 UX를 구현하려면 제품/웹사이트의 컨셉과 유저의 멘탈 모델을 잘 맞춰야 한다. 아니면 다른 멘탈 모델을 가진 유저에게 어떻게 "학습"시킬 것인지 강구해야한다.
  • 메타포는 컨셉을 유저에게 알려주기 쉽게 도와준다. 예를 들어 "이부분은 책을 읽듯이 읽으세요."
  • 유저의 멘탈 모델을 알아보기 위해서는 역시 사용자 조사가 가장 중요하다.


10. 비쥬얼 시스템


  • 정보가 통일이 잘 되지 않아 유저가 헷갈려 한다면 그룹으로 묶어서 유저가 어디를 봐야하는지 명확하게 해줄 수 있다.
  • 가까이 있는 것들은 당연히 함께 움직일거라고 생각한다. (위 그림을 참조하면 왼쪽 동그라미들은 함께 움직일거라고 당연히 예상하게 된다.)
  • 충분히 큰 폰트를 사용해라, 현란하지 않은 폰트를 사용해 읽기 쉽게 만들어라.
  • 연구결과에 따르면 사람들은 주변 시야로도 사물을 파악한다고 한다. 촛점 추적(Eye tracking) 연구는 흥미로운 연구지만 누군가 한곳을 응시하고 있다고해서 반드시 그곳에 집중하고 있는 것은 아니라는 것이다.
  • 함께 보기 어려운 색상이 있는데 빨강과 파랑 같은 것이 그렇다. 파란 배경에 빨강 텍스트를 넣는 짓은 자제해야한다. 반대로도 마찬가지다.
  • 사람들이 스크린에서 가장 사물을 잘 식별할 때는 약간 기울어져있고 약간 원근감이 있고 약간 위에 있는 것이라고 한다. (canonical perspective)
  • 색상은 어떤 것들이 같은 종류인지 구별하게 해준다. 하지만 색맹을 위한 고려도 잊지 말아야한다.


자, 이제 여러분은 코끼리를 어떻게 설명하시겠습니까?



원본 : The Psychologist's View of UX Design


누구나 코끼리에 대한 일화를 들어본 적이 있을 겁니다.


어두컴컴한 방에 왕은 여섯명의 신하를 데려왔다.

너무 어두워서 아무것도 보이지 않는 방이었다.

왕이 말했다.

"얼마전 동쪽 밀림에서 코끼리라고 불리우는 동물을 구입해왔네."

그러자 신하 중 한명이 물었다.

"코끼리라는게 무엇입니까?"

왕이 대답했다.

"각자 코끼리를 만져보고 묘사를 해보는게 어떻겠나?"


다리를 만진 신하는 이렇게 대답했다.

"코끼리라는 동물은 기둥 같습니다."

꼬리를 만진 신하는 이렇게 대답했다.

"코끼리라는 동물은 밧줄 같군요."

코를 만진 신하는 이렇게 대답했다.

"코끼리라는 동물은 마치 나무 가지 같습니다."

귀를 만진 신하는 이렇게 대답했다.

"코끼리라는 동물은 부채같습니다."

배를 만진 신하는 이렇게 대답했다.

"코끼리라는 동물은 마치 벽같군요"

상아를 만진 신하는 이렇게 대답했다.

"코끼리라는 동물은 마치 단단한 파이프같습니다."


왕이 말했다.

"모두 맞는 말이다. 너희는 모두 코끼리의 다른 부분을 만진 것이니라."


이 코끼리에 대한 일화는 사람들은 각자의 환경, 교육, 경험에 따라 모두 다르게 인식한다는 사실을 깨닫게합니다.


시각 디자이너는 UX Design을 하나의 시각으로 봅니다. 

인터렉션 디자이너 역시 또 하나의 시각으로 바라보죠. 

개발자는 또 다른 시각으로 보게 됩니다. 


코끼리 일화가 이것을 이해하는데 도움을 주는 것입니다.


저는 심리학자로써 배우고 훈련됐기 때문에 코끼리 일화를 제가 배운 것들을 토대로 사람을 어떻게 이해하고 UX design을 어떻게 적용해야되는지를 이야기해보겠습니다.

저는 뇌에 대해 연구를 진행했고 그 결과 UX Design에 대한 시각, 기억, 동기, 추론에 대한 원칙들을 세웠습니다.


다음 이 글은 코끼리 이야기를 심리학자의 관점에서 풀어본 글입니다.


1. 사람들은 꼭 해야되는 일이 아니면 하려하지 않는다.


  • 사람들은 한 가지 일에 가능한한 최소한의 일만 하려한다.
  • 이는 최소한의 정보만 보여주고 정보를 더 원하면 선택해서 보게 하는 것이 매우 효과적이다. 이를 전문 용어로는 점진적 접근(Progressive Disclosure)라고 한다. (자세히 보기 : http://www.whatmakesthemclick.net/tag/progressive-disclosure/)
  • 설명하지 말고 예제를 보여줘라.
  • 사람들은 화면이나 페이지에서 눈에 띄는 객체에 관심을 갖게 된다. 클릭을 유도하려면 누가봐도 버튼이라고 알 수 있게 만들어라.
  • 유저가 정말로 필요한 정보만 제공해라. 당신 생각에 필요할 것 같다고 넣지 말고 유저 리서치를 진행해서 정말로 유저에게 필요한 것을 찾아내라. 필요이상 많은 정보는 혼란만 가중시킨다.
  • 기본값을 제공하라. 기본값은 일을 훨씬 수월하게 만든다.


2. 사람에겐 한계가 있다.


  • 사람들은 주의를 잃지 않을 정도의 정보와 문자만을 받아들인다. 그 순간에 필요한만큼의 정보만을 제공하라. (점진적 접근을 참조)
  • 훑어보기 쉽게 정보를 제공하라.
  • 말머리(header)나 작은 글 상자(short block)을 사용하라.
  • 사람들은 동시에 여러가지 일을 하지 못한다. 이 연구가 그것을 증명한다. 동시에 여러일을 하게 만들지 말라.
  • 사람들은 짧은 문장을 선호하지만 의외로 좀 긴 문장도 잘 읽는다. 말장난 같지만 상황과 능력에 맞게 잘 설정해야한다. 하지만 알아둬야할 것은 사람들은 더 알고 싶은게 있으면 찾기 마련이지만 그게 꼭 필요한 정보는 아닐 때가 많다.


3. 사람은 누구나 실수를 한다.


  • 사람은 항상 실수를 하기 마련이다. 유저는 실수를 하게 된다고 가정하고 그것을 방지하기 위한 방법을 강구하라.
  • 실수가 치명적인 결과를 야기할 수 있다면 유저가 결정하기전에 확인 과정을 거치도록 하라.
  • 쉽게 Undo할 수 있도록 하라.
  • 실수를 되돌리도록 장치하는것보다는 실수를 미연에 방지하는 것이 무조건 좋다. 가장 좋은 에러 메세지는 에러 메세지가 나타나지 않는 것이다.
  • 실수가 자주 나타나는 과정이라면 그 과정을 여러 단계로 나눠서 제공하라.
  • 유저가 실수를 한 것을 알 수 있고 당신이 그것을 바로 잡을 수 있다면, 바로 수정해주고 무엇을 했는지 알려줘야 한다.
  • 누가 UX를 디자인을 하건 실수를 할 수 있고 유저 피드백과 테스트를 꾸준히 반복하고 그것에 시간과 에너지가 든다는 것을 분명히 하라.


4. 사람의 기억은 꽤나 복잡하다.


  • 사람은 기억을 항상 재구성한다. 즉 기억은 계속 변한다는 뜻이다. 유저가 하는 말은 전부 사실은 아니라는 것을 알고 있어야 한다. 말보다는 그들의 행동을 관찰하는 것이 훨씬 효과적이다.
  • 기억은 잊혀지기 매우 쉽다. 빠르게 감소하며 많은 오류가 생겨나기도 한다. 유저의 관심이 옮겨갈 때 너무 많은 것을 기억하게 하면 안된다.
  • 사람은 한번에 3~4개만 기억한다. 7 ± 2 법칙은 꽤나 유명한 법칙이기도 하다. 하지만 연구를 해보면 실제로는 3~4개가 가장 현실적인 숫자다.


5. 사람은 사회적이다.


  • 사람은 항상 사회적으로 어울리기 위해서 기술을 활용한다. 이는 수천년에 걸쳐 확인된 사실이다.
  • 사람은 무엇을 해야할지 모를 때는 다른 사람이 어떻게 하는지를 살피기 마련이다. 이를 사회적 인증(social validation)이라고 부른다.
  • 사람들이 동시에 같이 무언가를 할 때면(협력) 이를 통해 사람들은 서로 이어주게 된다. 실제로 뇌를 통해 같은 화학적 반응이 일어난다. 웃음 역시 사람을 연결시킨다.
  • 만약 당신이 내 부탁을 들어주면 나는 당신에게 보답을 하고 싶어하게 된다. 연구 결과에서도 당신이 사람들에게 필요한 게 있다면 사람들에게 필요한 것을 먼저 제공하고 그들에게 필요한 것을 요구해라. 절대 반대로 하면 안된다.
  • 사람은 누군가가 뭔가를 하는 모습을 보면 무엇을 하고 있었던간에 자신도 그렇게 하고 있는 모습을 머리속에 순간적으로 연상하게 된다.(일명 거울효과) 우리는 애초에 그렇게 반응하도록 만들어졌기 때문이다. 만약에 사람들을 움직이려면 우선 그렇게 움직이는 사람을 보여주는 것이다.
  • 당신은 강한 유대를 최대 150명까지만 가질 수 있다. 강한 유대란 물리적으로도 친하다는 느낌을 갖게한다는 것을 뜻한다. 하지만 약한 유대는 수천명까지도 가능하며 매우 전파력이 강하다.(예, 페이스북)


번역 Part 1 끝.


6~10은 part 2에 올릴께요 ㅋ




뭔소린고 하니


애니메이션 데이터인 XML 파일을 많이 사용하는데


[Embed(source="animation/none.anim", mimeType="application/octet-stream")]
static public const NONE: Class;


이런식으로 embed 해놓고 씁니다.


근데 용량이 크다보니까 부담이 될거 같아서 deflate로 압축을 해서 컴파일을 하자!


라고 마음을 먹고 압축을 해서 


880kb 였던 파일들을 28kb까지 줄였습니다.


와~!! 용량 많이 줄겠지~?


하고 봤더니


1,823 kb 였던 swf가 1.831 kb로 늘어난것이 아니겠습니까?!


헉!!


원인은 자동으로 swf 컴파일 과정에서 compress 되는데


인위적으로 압축된 파일을 포함해서 압축을 하니까 압축데이터의 헤더가 겹쳐서 되려 용량이 늘어났던 겁니다.




결론) 압축은 swf 컴파일 과정에서 하니까 걍 냅두자 :D




For the better.


+ Recent posts