UX 모임 2018-10-22

UX 모임

1 선애
- 1.1 RULE5 감성으로 접근하라
2 현규
- 2.1 일러스트레이션 효과적으로 사용하기
  - 2.1.1 사진 종류별 유의사항
  - 2.1.2 효과적으로 일러스트레이션을 이용하기 위한 9가지 지침
3 린지
- 3.1 The Design of Everyday Things Ch. 4 - Knowing What to Do: Constraints, Discoverability, Feedback

선애

웹사이트 : 레고
UX 모임: 웹페이지 분석 - 레고

RULE5 감성으로 접근하라

핵심콘텐츠에 집중하라

먼저, 제품을 구성하는 콘텐츠, 요소의 가치를 평가하는 기준과 관점을 판단

- 기능성 : 기능적인 측면에서 전체 제품에 이바지하는 정도와 특성. 핀터레스트
- 정체성 : 제품의 특징이나 개성을 기억시키는 요소. 구글
- 사용성 : 정확성과 보안성이 필요한 서비스에서는 매우 중요. '언제, 어디서나, 쉽게' 페이팔
- 사업성 : 경제적 가치를 얻기 위한 것이라면 목적에 충실히 설계. IMDb 로튼토마토

제품을 구성하는 기능과 내용을 이와같이 네가지 관점에서 평가할 수 있음. 같은 요소라도 상황에 따라 역할과 중요성을 판단할 수 있어야 함.

메시지를 디자인하라

XMB 인터페이스

Dead Space

시각디자인(Visual Communication Design) : 시각요소를 활용하여 소통하는 방법을 디자인.
메시지는 의미와 함께 넓고 큰 흐름과 전달방식으로 드러남.
하나의 기호체계로써 의미를 가지는 디자인은 언어적인 요소로 사용해도 좋음.
스큐어모피즘(Skeuomorphism) : 현실세계를 은유한 본래의 형태로 표현하는 것.
UI에서 아이콘을 사용할 때에는 사람들에게 익숙한 디자인을 활용하는 것이 좋음.
새로운 인터페이스는 참신한 디자인으로는 안되고 사용자가 받아들일 수 있는 새로운 콘셉트를 이용해야함.
게임은 모든 구성요소에서 사용자의 즐거움을 추구. 게임UI는 일관성 있는 자극과 동기부여 요소이며 감성적으로도 몰입과 흥미를 강화하는 도구.
- Dead Space, 타이탄 폴, 모뉴먼트 밸리 등
아이콘 디자인의 선구자 Susan Kare

개성과 분위기를 표현하라

시각 디자인에 더해 유기적으로 콘셉트, 기능과 함께 여러가지 요소가 결합되어야 감성적인 경험이 완성됨.
디자인에 톤이나 분위기, 목소리를 표현하기 위한 여러가지 방법
- 색 ex) Cuphead, Limbo 등
- 질감
- 배치 ex) playground c-21
- 이미지 스타일 : 사진, 초상화, 도식화, 스케치 등

움직임을 표현하라

기존에는 애니메이션 효과로 피드백을 주는 방식이 기술적인 문제로 회피되어옴.
그러나 터치 인터페이스가 일반화되고 스마트폰의 성능이 향상되면서 움직임의 중요성이 커짐.
- 위치, 속도, 방향 : 모든 움직임은 위치와 속도, 방향을 가짐. 이를 활용하여 표현 가능.
- 겹침 : 두가지 이상 개체에 공통요소를 만듦. ex) 앱 서랍 기능
- 패턴 동작 : 터치 인터페이스를 활용. 스와이프.

친절한 디자인을 하라

친절한 디자인 : 정보의 핵심을 알아듣기 쉽고 정서적으로도 안정감 있게, 따뜻한 기분이 드는 소통과정처럼 디자인에 배려를 담는 것
논리적인 접근 : 사용성 최적화를 통해 제품의 핵심기능을 제대로 전달하며 정확한 정보를 유용하게 제공.
인지적인 접근 : 기억에 남는 경험은 사용자가 상황에 집중하고 몰입해야 가능. 몰입은 사용자가 부담없이 자신의 욕구에 집중하여 원하는 것을 탐색할 때에 가능.
- 장기기억(LTM, long term memory) : 우리가 기억하는 많은 경험.
- 단기기억(STM, short term memory) : 지속시간 10-20초, 동시처리 정보갯수 5-7개
감성적인 접근 : 친절함의 감성(편안함, 안정감, 배려, 안심 등). 시각요소와 청각요소 등을 활용. ex) OmmWriter
친절한 디자인은 디자이너의 실제 사용자에 대한 이해가 필수적.

소리로 전달하라

사람의 오감은 개별적으로 작동하지 않고 동시에 전체적인 직관을 형성. 소리는 필수적인 요소.
칵테일 파티와 주의 집중
- 칵테일 파티(Cocktail Party) 효과[선택적 지각(Selective Perception) : 주변환경이 소음으로 가득해도 주의를 집중하여 원하는 소리를 듣는것.
- UX디자인의 소리는 다른 소리와 분명하게 구분하고 직관적이어야 하며, 객관적인 정보를 담을 수 있어야 함.
소리 정보의 활용
- 직관적인 소리
  - 인공적인 소리를 디자인하기 전에 직관적인 소리 정보를 얻고 활용해야 하는 점을 이해해야함.
  - 직관적인 소리는 대부분 경험을 통해 축적되어 상황과 소리는 자연스러운 관계를 가짐.
  - ex) 크리스털와인잔, 금속 자물쇠, 애플사의 Mighty Mouse, 시리얼, 구급차 등
  - 직관적인 소리는 정보를 빠르게 전달. 기본적으로 직관성을 보장할 수 있는 범위에서 창의성을 발휘해야 함.
- 메시지를 담는 소리
  - 쉽게 말해 대화하는 것. 모든 종류의 메시지는 상호간에 소통하는 공통점이 필요.
  - 명확하고 효율적으로 메시지를 전달하기 위해서는 쉽고 단순한 단어를 사용하고 메시지의 의미도 한가지로 제한.
  - 언어 : 서로 이해할 수 있는 하나의 언어
  - 환경적 특성 : 지리적 환경 뿐만 아니라 시간, 기후, 문화적 환경 등 사용자의 다양한 환경요소 고려
  - 절차적 연관성 : 서로간에 절차의 흐름을 정확하게 공유. ex) ARS
음향정보의 특성
- 선형성 : 소리는 선형적. 주의 집중과 메시지를 이해하는 데 필요한 시간 고려. ex)팟캐스트
- 전파성 : 적합한 상황과 목적에 따라 사용.
- 취향과 감성 : 소리는 시각정보 이상으로 상상력을 자극. 음향은 언제나 선택 및 조절할 수 있게 구성.
음향 인터페이스 AUI
- 제품에서 음향인터페이스를 디자인할 때 생각해야할 주제들

사용자 행위와 기대에 적절하게 반응하는 자연스럽과 직관적인 피드백을 제공하는가?
소리가 일관성과 규칙성을 가지고 체계적으로 구성되는가?
제품의 전략적인 방향성을 감성적인 면에서도 충분히 표현하는가?
사생활이나 공공장소에서의 불편함을 끼치지 않는가?
음량이 너무 크거나 자극적인 소리로 인해 사용자에게 스트레스를 주는가?

- 긍정적인 사용자 경험을 추구하는 제품이라면 소리를 통한 전체적인 경험에서 일관성과 방향성을 유지해야함.

터치와 촉감으로 디자인하라

개인PC시대에는 키보드와 마우스로 조작하기 때문에 모니터와 직접적인 소통이 없었음
모바일 혁명이후 터치인터페이스가 널리 일반화됨.
촉감 요소는 현재 진동정도에 그치지만, 그래픽과 모션디자인을 활용해 가상의 촉감을 디자인할 수 있음.
'타격감' : 액션 게임에서 느끼는 특유의 조작감. 여러가지 요소가 순간적으로 결합하여 하나의 타격감, 즉 촉각을 창출.
햅틱 피드백 : 직관적인 형태의 메시지 역할, 촉각은 청각에 비해 사용자에 따른 민감도나 인지능력의 차이가 큼. 시각정보와 함께 사용자 주의집중을 강화하는 수단으로 사용하는 것이 적합.

하드웨어와 소프트웨어의 사용자 경험을 고려하라

최근 스마트 기기는 내장된 운영체제와 소프트웨엉, 이들을 탑재하고 물리적인 소통방법을 제공하는 제품 디자인 사이의 유기적인 통합을 강조.
유연한 하드웨어 인터페이스
- 스마트폰이 주목받는 이유는 확장성과 유용성 : 자유롭게 어플리케이션 설치.
- 최근 기술트렌드는 사용자 선택과 필요성에 따라 확장할 수 있는 유용성에 초점
- 따라서 하드웨어 또한 유연한 환경에 대응할 수 있어야 함. 화면 기반의 인터페이스의 중요성이 확대됨
경계없는 인터페이스 : 하드웨어와 소프트웨어는 사용자 입장에서는 하나의 통합된 제품. 이 두가지가 하나의 목적과 가치를 공유하여 자연스럽게 연결되어야 함.
감성적 통합 : 물리적 제품의 외형인 하드웨어는 직관적이며 직접 사용자 감성에 다가감. 반면 소프트웨어는 뇌의 인지작용을 거져 정신적인 교감을 형성.

새로운 경험을 디자인하라

웨어러블 제품 : 현실세계에 디지털콘텐츠와 서비스를 더해 새로운 가치를 만드는 증강현실 콘셉 제품. ex) 구글 글래스
웨어러블 기기 시장은 아직 초기 단계로, 성공가능성을 높이기 위해서는 사용자 관점에서 이해하는 '통찰력'이 필요.
웨어러블 컴퓨터 분야는 다양한 시도가 진행중. 감성에 초점을 맞춘 시도도 꾸준히 진행.
휴대에서 착용으로 : 착용형 장치는 사용자와 기기 사이의 관계에서 큰 장점을 가짐. 신체에 밀착되어 사용자 경험을 동시에 공유하고 이를 지능적으로 활용하여 새로운 가치를 만들 수 있음.
감성 vs 기능성 : 필요성과 별도로 감성적인 영향을 미침
- 감성 : 미적인 영역. 웨어러블 영역에 자연스럽게 어울리는 기능과 외형/ 감성적인 소통요소 디자인영역. 1인칭 관점의 공유
신체정보의 활용 : 개인의 영역을 확장시킴. 사용자의 기본적인 신체상태와 활동상황을 실시간으로 분석.
개인영역의 확장 : 카메라를 통해 시각정보를 저장하고 위치를 추적하여 온라인에 기록. 이를 바탕으로 멀티미디어 콘텐츠도 생산가능.
특수목적 : 스포츠나 군사 목적, 의료 활동을 위한 연구, 재해 대책이나 우주 탐사 등을 위한 것.

현규

사이트:three.js

일러스트레이션 효과적으로 사용하기

사진 종류별 유의사항

정확한 항목사진
- 사람들이 어떤 측면을 보고싶어 하는가.(ex 등산화 밑바닥 보여주기)
- 말과 앞으로 일어나는 일이 일치되게 하라. 기대감 충족시키기.
- 사진이나 그림이 도움이 되는 다른 상황도 생각하라.
- 오프라인 정보와 온라인 정보를 연결하라.
- 책, 잡지, 또는 다른 인쇄 매체의 사진이라면 꼭 그 인쇄 매체를 웹과 연결시켜야 할지 생각하라
콘셉트나 절차를 보여주는 사진
- 크기 비교(ex 자동차 크기)
- 규모와 비율 이해하기(ex 편지 사이즈)
- 절차 보여주기
차트, 그래프, 지도
- 지도와 목록을 결합하라
- 단순하게 만들라. 보여지는 데이터 양을 사용자가 선택할 수 있게 하라.
- 차트와 그래프의 제목에 핵심 요지를 담아라.
- 좋은 데이터 제시 원칙을 웹에도 적용하라.
감성적인 사진
- 사진이 의도했던 감성을 불러일으키는지 확인하라.
- 전 세계 고객을 감안하라.

효과적으로 일러스트레이션을 이용하기 위한 9가지 지침

무엇인지, 왜 그런지 생각하게 하지마라.
적당한 크기로 제시하라
- 작은 사진도 선명히 보이게 하라
- 사진으로 공간을 너무 많이 써서 중요한 정보가 밀려 내려가거나 옆으로 빠지게 하지 마라.
콘텐츠를 감추기보다 돋보이게 하는 일러스트레이션을 이용하라.
사람 사진에는 다양성을 담아라
- 여러분의 회사가 다양성을 표방한다는 것을 보여라. 하지만 진실돼야 한다.
- 방문자를 대변하려면 폭넓게 생각하라.
- 테스트, 테스트, 테스트
콘텐츠가 광고처럼 보이지 않게 하라.
글자나 사진이 깜빡거리거나, 돌아가거나, 흔들리거나, 돌아다니게 하지마라.
- 텍스트가 돌아가게 하지마라.
- 사람들이 페이지에 있을 때 페이지를 바꾸지 마라.
- 동물, 새, 나비 등이 페이지에 돌아다니게 하지 마라
- 애니메이션 효과에 따른 트레이드 오프를 신중히 고려하라
애니메이션은 도움될 때만 사용하라.
스플래쉬나 플래시로 사람들을 기다리게 하지 마라
- 스플래쉬 페이지는 사람들의 시간을 잡아먹는다
- 좋은 말도 과하면 안하느니만 못하다
- 사람들은 온라인 경험을 직접 제어하고 싶어한다.
- 일부 사람들에게는 진입부의 비디오가 장애물이다.
- 일러스트레이션은 접근 가능하게 만들어라

린지

살펴볼 사이트: 한국어/로마자 변화기

The Design of Everyday Things Ch. 4 - Knowing What to Do: Constraints, Discoverability, Feedback

뭘 하면 되는지를 아는 방법: 제약, 발견성(?), 그리고 피드백

How do we operate something new? --> Knowledge in the world (affordances, signifiers, mappings, constraints) and knowledge in the head (conceptual models, analogies to previous situations) 새로운 제품 또는 서비스의 이용법 어떻게 아나요? 셰계에 있는 지식(affordances, signifiers, mappings, constraints)과 머리의 있는 지식(conceptual model, 기존의 경험와의 비유)을 통해.

Four Kinds of Constraints: Physical, Cultural, Semantic, and Logical 4 가지의 제약: 물리적, 문화적, 의미적, 논리적

Physical constraints 물리적 제약

Limited number of actions 행동의 한정된 개수
Desired action made obvious 원하는 행동을 분명히 한다
Restriction prior to any action being taken (to prevent wrong action before it happens) 행동하기전의 한계 (틀린 행동을 방지하기 위해)
- Battery design; USB design? 건전기, usb 디자인
Legacy problem: too many devices use the existing standard '레거시 문제' - 수 많은 제품들이 안 좋은 디자인을 오래 사용해 왔기 때문에 바꾸고 싶더라도 바꾸기가 쉽지 않다
- Expense of change? 바꿈의 비용인가?
- Corporate thinking - not caring about the customer 아니면 사용자를 무시하는 사업의 태도인가?

Cultural constraints 문화전 제약

Each culture has a set of allowable actions for social situations 어느 사회적 상황에서 가능한 행동이 문화마다 정해져 있다.
Ex: Restaurant, public transportation 예: 식당 방문, 대중 교통
Can change over time 시간 지나면 변화한다

Semantic constraints 의미적 제약

The meaning of the situation controls the set of possible actions 상황의 의미에 따라 가능한 행동이 한정되어 있다.
Can change over time 시간 지나면 변화한다

Logical constraints 논리적 제약

After all other options, what is left? 다른 행동들을 다 해보고 나서 남은 것이 뭐가 있는기?
Obvious errors 당연한 오류
Natural mappings help here 여기는 자연적인 매핑이 도움이 된다

Cultural norms, conventions, and standards 문화적 규법, 관습, 기준

Greetings with people, traffic laws, food etiquette 인사, 교통 법, 식사 예절 등
A form of cultural constraint 문화적 제약 중에 하나
Sometimes become international standards or laws 이 것이 국제적인 기준이 되는 경우도 있다
Violate conventions, and you are marked as an outsider 관습을 위반하면 외부인으로 인식이 될 위험성이 있다

Applying Affordances, Signifiers, and Constraints to Everyday Objects 평소에 사용하는 물품에 affordances, signifiers, 그리고 제약을 적용하기

The problem with doors '문'의 문제

Sometimes unclear how to use - where to push, push or pull, automatic or not, etc. 사용 방법이 불명확한 경우가 있다 - 어디서 누르고 당기는지, 자동인지 아닌지, 등
Focus on aesthetics may blind the designer/purchaser to the lack of usability 미학에 집중함으로써 (디자이너나 구매자가) 사용의 편리성이 잊게 되는 경우가 있다
Cultural norms play a role 문화 규법의 역할

The problem with switches '스위치'의 문제

Can be annoying... or dangerous 귀찮을 수도 있지만 그것보다 위험할 수도 있다
Must know: 1) what they control, 2) mapping (which they control) 알아야 될 것 : 어떠한 것을 조절하는지, 매핑 (무엇을 조절하는지)
More switches --> more danger 스위치가 많을 수록 위험성이 높아진다
Problem comes from coordination of various professions 문제는 여러 직업의 조직화를 통해 이루어진다
Phone/computer applications for this may solve the problem; touch screens, cameras which recognize gestures? 휴대폼, 컴퓨터 등의 스크린(화면) 또는 센서를 통해 이 문제를 어떻게 해결하게 될 수 있을까?

Activity-centered controls 행동 중심 조종 장치

video, computer, full lights, lecture, etc. 비디오 재생, 컴퓨터 사용, 모든 불, 강의 등과 같은 행동을 위한 조종 장치가 좋다
can be done poorly 그러나 잘 못할 수 있다
device-centered is a wrong approach - different switches/screens for different devices 디바이스(기계) 중심 조종 장치가 틀린 접근 방법이다
regardless, manual controls will still be required because of new, unexpected, demands which require idiosyncratic settings 행동 중심 조종 장치가 있더라도 수동 설정이 가능해야 핸다
manual setting should not cause the current activity to be canceled 단, 수동 설정은 사용 중인 행동 중심 조절을 취소 시키면 안 된다

Constraints That Force the Desired Behavior 원하는 행동을 억지로 하게 만드는 제약

Forcing functions 억지로 하게 하는 기능

a kind of physical constraint: situations in which the actions are constrained so that failure at one stage prevents the next step from happening 물리적 제약 중에 하나 : 한 단계에서의 실패는 다음 단계로 지나가지 못 하게 한다
ex: car keys 예 : 자동차 열쇠

Interlocks

Forces operations to take place in proper sequence 알 맞는 순서 대로 하게 한다
Press down brake pedal to switch out of park 브레이크 페달을 누르고 있어야 park에서 drive 등으로 바꿀 수 있다
"Dead man's switch" - user must hold down switch during use so that if they die/are injured the operation stops '죽은 사람의 스위치' : 스위치를 누르고 있어야만 사용할 수 있다 (즉, 죽으면 스위치를 더 이상 누르지 못해서 자동으로 중지된다)
- lawn mower, chainsaw, etc. 잔디갂기기계, 전기톱

Lock-ins

Keeps an operation active, presenting someone from prematurely stopping it 작업을 계속 하게 한다 (즉, 사람이 일찍이 그 작업을 중지하지 못하게 한다)
Ex: "Want to save file?", jail cells, play pens 예 : '나가기 적에 파일을 저장하시겠어요?', 감옥, 아기 놀이울
Devices which only are compatible with the company's other devices 같은 회사 제품만과 사용이 가능한 제품

Lockouts

Prevents people from entering a dangerous space or prevents an action 위험한 공간 또는 행동에 진입하지 못하게 하는 것
Barrier between ground floor and basement for fire safety 화재 안전을 위해 1층과 지하 사이의 게이트

Conventions, Constraints, and Affordances 관습, 제약, 그리고 affordances

From perception of an affordance to understanding the potential action relies on conventions / affordance의 인식에서 가능한 행동에 대한 이해까지는 관습이 필요하다
Ex: doorknob 예 : 문 손잡이

Conventions are cultural constraints 관습은 문화적 제약이다

When conventions change: the case of destination-control elevators 관습이 바꿀 때 : destination-control 엘리베이터의 사례

People's responses to changes in conventions 관습이 바꿀 때 사람의 반응

People complain, new learning is required 불평한다, 새롭게 배울 것이 있다
The merits don't matter, the change does 좋은 점은 상관 없다, 바꿔야 된다는 것이 상관이 있다
Ex: metric system and the U.S. 예 : 미국과 메트릭 시스템

The Faucet: A Case History of Design 수도 꼭지 : 디자인의 사례 역사

How to deal with hot and cold 냉.온수의 문제
- Separate not and cold? Only temperature? Only amount? On-off? 내수와 온수를 따로 조절함? 온도만 조절함? 압력만 조절함?
Which is hot/cold? How to change temp? How to change flow? Which direction controls flow? 어떤 것이 온수고 어떤 것이 냉수인가? 온도를 어떻게 조절하는가? 압력을 어떻게 조절하는가? 눌러야 압력이 강해지나 아니면 당겨야 압력이 강해지나?

Using Sound as Signifiers '신호'로써 소리의 사용함

Useful signifier, but can annoy/distract 유용하지만 귀찮게 하거나 집중 못하게 할 수 있다
Silence can be dangerous 소리 없으면 위험할 수 있다
- Ex: Electric cars, pedestrians cannot hear the car approaching, can be hit 예: 전자 자동차가 너무 조용해서 보행자가 자가 오는 것을 못 들려서 사고가 날 수 있다
Skeumorphic - old, familiar ideas into new technologies even if they do not have a functional role 스큐어모피즘 - 옛날 또는 익숙한 개념들을 실제적인 소용이 없더라도 새로운 기술에 포함시키는 것

Navigation menu